Button component with slider confirmation

[Srinivas_Opti]

Hello,

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

initially look of the button will be 

After user completes the slide it must look like below

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

[arunpatidar]

Hi @Srinivas_Opti 
Please check https://www.w3schools.com/howto/howto_css_switch.asp 

[EstebanBustamante · Accepted solution]

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