Expand my Community achievements bar.

Guidelines for the Responsible Use of Generative AI in the Experience Cloud Community.
SOLVED

Button component with slider confirmation

Avatar

Level 4

Hello,

I am using aem6.5 need to have slider confirmation button which will look like below

 

initially look of the button will be 

Srinivas_Opti_2-1719388260497.png

 

 

After user completes the slide it must look like below

Srinivas_Opti_3-1719388289225.png

 

It looks like more on CSS tricks and looked on few sites and could find a solution.Hence posting here if any one has
done this and could help me out with code sample as how could I acheive it

I currently have below code. How to modify to achieve it
<button id="slider">
<input id="confirm" type="range" value="0" min="0" max="100" />
<span >File deleted.</span>
</button>

 

Regards,
Srinivas

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

Hi, 

This is a plain CSS question, you can try to explore additional forums to this one. But I think you can find your solution in this code pen example: https://codepen.io/RazorXio/pen/gMaoOW 

Hope this helps



Esteban Bustamante

View solution in original post

2 Replies

Avatar

Correct answer by
Community Advisor

Hi, 

This is a plain CSS question, you can try to explore additional forums to this one. But I think you can find your solution in this code pen example: https://codepen.io/RazorXio/pen/gMaoOW 

Hope this helps



Esteban Bustamante