How can I design the input of range by CSS?

Question

I wanna learn the design <input type="range"/> by CSS.

I have some workings in the past for design the input of range by another thing .

Here👇👇👇

https://code.sololearn.com/W81yRIgYc4I1/?ref=app

It's became beautiful ,I want to create thing alone by CSS.

Answer 1

CSS only:

https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/

Other relevant articles (not CSS only):

https://css-tricks.com/value-bubbles-for-range-inputs/

https://css-tricks.com/custom-interactive-range-inputs/

https://css-tricks.com/sliding-nightmare-understanding-range-input/

I hope these help! 😊

Answer 2

Thanks so much