Here is a design. I want to make it as simple as possible without jquery_ui.

Here is a design. Two green runners. The end points are gray circles under which the label has a maximum and minimum value. Between the runners fill in green. I want to make it as simple as possible without jquery_ui. And in general how such sliders work. I read, but it's not like that. I would like to find how to step by step. That is simple and from scratch. To understand how to gain FULL power over this component. Can this be done using flexbox and dragable?

2 answers 2

You can do it on pure css . Not using javascript .

Styles are not as in the lice picture. This can be changed to your taste. And how to do it can see here .

 var slider = document.getElementById("myRange"); var output = document.getElementById("demo"); output.innerHTML = slider.value; slider.oninput = function() { output.innerHTML = this.value; } 
 #slidecontainer { width: 100%; } /* The slider itself */ .slider { -webkit-appearance: none; width: 100%; height: 15px; border-radius: 5px; background: #d3d3d3; outline: none; opacity: 0.7; -webkit-transition: .2s; transition: opacity .2s; } .slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 25px; height: 25px; border-radius: 50%; background: #4CAF50; cursor: pointer; } .slider::-moz-range-thumb { width: 25px; height: 25px; border-radius: 50%; background: #4CAF50; cursor: pointer; } 
 <div id="slidecontainer"> <input type="range" min="1" max="100" value="50" class="slider" id="myRange"> <p>Value: <span id="demo"></span></p> </div>

Here I used several javascript lines to show the current value under the slider.

  • How to make 2 runners? - LutiyCsharp
  • @LutiyCsharp codepen.io/sakamies/pen/qOEGLJ - Raz Galstyan
  • @LutiyCsharp And one more thing, the question did not say at all about 2 sliders, ask a question so that you can give a definite answer. And not so that after the answer for hours to clarify what's what. - Raz Galstyan
  • @LutiyCsharp Well, about 2 sliders I already gave a link here - Raz Galstyan
  • Razmik, Ok, I'm starting to add puzzles, your answer, plus your link to the styling of the fill for the slider, plus a link to the codepen. Thanks, now I will try to put everything together. - LutiyCsharp

I found it on github http://nitinhayaran.imtqy.com/jRange/demo/ - it is very well configured and scaled. It has a simple css file and a clear .js file that is easy to edit. Depends on the jQuery shared library.

  • Although the link can find the answer to the question, it is better to point out the most important thing here, and give the link as a source. If the page to which the link leads will be changed, the response link may become invalid. - From the queue of checks - Viacheslav Vedenin
  • Wrote an expanded answer, but waved the code to edit in this editor after spending 20 precious minutes, pressed cancel. There is a text with the answer and code. If anyone can post it here, I'll send it to the post office. poluusver - my skype. - LutiyCsharp
  • Post as you can and write a comment, I'll edit it - Viacheslav Vedenin