Is it possible to stylize the usual input [type=range] like this: enter image description here

There are no ideas how to do this without using a bunch of little div .

 <input type="range" min="0" max="100" step="0.1" value="0"/>

  • I think that only SVG / Canvas + JS will help you - Dmytryk
  • 3
    This question in the form of a picture should be closed, because it is useless for the knowledge base (the one who has a similar question cannot find this question and the answers to it) - aleksandr barakin

1 answer 1

 $("#slider").roundSlider({ width: 10, handleSize: "+16", value: "25" }); 
 @import url('https://cdn.jsdelivr.net/jquery.roundslider/1.0/roundslider.min.css'); .rs-control .rs-path-color { background-color:#dfdfdf; border-color: #3f3f3f; } .rs-handle { background-color: #3f3f3f; } .rs-bar .rs-seperator { display: none; border-color:#dfdfdf; } 
 <script src="https://code.jquery.com/jquery-2.2.4.js"></script> <script src="https://cdn.jsdelivr.net/jquery.roundslider/1.0/roundslider.min.js"></script> <div id="slider" class="rslider"></div>

  • in this implementation, isn't a bunch of small divs being used? - Dmytryk
  • @ Dmytryk Look at the item code. Used by - Eugen Eray