Hello, you need to make a slider with an individual design. Therefore, input type=range will not work, I tried to use jQueryUI, but it also does not provide the necessary level of customization. As a result, the creation of a slider from two objects of the div tag came to the options, so the question is:

Are there ready libraries or plug-ins that allow you to customize your own slider, or do you have to write everything manually?

Instead, the slider should be roughly a picture

    1 answer 1

    In order to stylize the <input type="range"> you need to know which parts for the browser it consists of.

    Here is a picture. Which shows parts of range . And each part can be styled separately.

    enter image description here

    Here is an example with an individual design. Here the range thumb superimposed by a div with a picture. The truth is that there is also a js code for an even more beautiful scrolling implementation of the slider. But in general, you can set styles without it.

    Here the picture is different than the author wanted. but in general the principle will probably be clear.

     function showValue(val,slidernum,vertical) { /* setup variables for the elements of our slider */ var thumb = document.getElementById("sliderthumb" + slidernum); var shell = document.getElementById("slidershell" + slidernum); var track = document.getElementById("slidertrack" + slidernum); var fill = document.getElementById("sliderfill" + slidernum); var rangevalue = document.getElementById("slidervalue" + slidernum); var slider = document.getElementById("slider" + slidernum); var pc = val/(slider.max - slider.min); /* the percentage slider value */ var thumbsize = 40; /* must match the thumb size in your css */ var bigval = 250; /* widest or tallest value depending on orientation */ var smallval = 40; /* narrowest or shortest value depending on orientation */ var tracksize = bigval - thumbsize; var fillsize = 16; var filloffset = 10; var bordersize = 2; var loc = vertical ? (1 - pc) * tracksize : pc * tracksize; var degrees = 360 * pc; var rotation = "rotate(" + degrees + "deg)"; rangevalue.innerHTML = val; thumb.style.webkitTransform = rotation; thumb.style.MozTransform = rotation; thumb.style.msTransform = rotation; fill.style.opacity = pc + 0.2 > 1 ? 1 : pc + 0.2; rangevalue.style.top = (vertical ? loc : 0) + "px"; rangevalue.style.left = (vertical ? 0 : loc) + "px"; thumb.style.top = (vertical ? loc : 0) + "px"; thumb.style.left = (vertical ? 0 : loc) + "px"; fill.style.top = (vertical ? loc + (thumbsize/2) : filloffset + bordersize) + "px"; fill.style.left = (vertical ? filloffset + bordersize : 0) + "px"; fill.style.width = (vertical ? fillsize : loc + (thumbsize/2)) + "px"; fill.style.height = (vertical ? bigval - filloffset - fillsize - loc : fillsize) + "px"; shell.style.height = (vertical ? bigval : smallval) + "px"; shell.style.width = (vertical ? smallval : bigval) + "px"; track.style.height = (vertical ? bigval - 4 : fillsize) + "px"; /* adjust for border */ track.style.width = (vertical ? fillsize : bigval - 4) + "px"; /* adjust for border */ track.style.left = (vertical ? filloffset + bordersize : 0) + "px"; track.style.top = (vertical ? 0 : filloffset + bordersize) + "px"; } /* we often need a function to set the slider values on page load */ function setValue(val,num,vertical) { document.getElementById("slider"+num).value = val; showValue(val,num,vertical); } document.addEventListener('DOMContentLoaded', function(){ setValue(88,1,false); }) 
     .slider{ position:absolute; left:0px; top:0px; overflow:visible; z-index:100; } .slidershell { border:0 none; position:relative; left:0px; top:0px; overflow:visible; } .slidertrack { border:2px outset #666; border-radius:4px; position:absolute; } .sliderfill { border:2px solid #00767f; border-radius:4px; position:absolute; opacity:0.2; pointer-events:none; background:#00767f; background: linear-gradient(90deg,#005555,#006699); } .sliderthumb { width:40px; height:40px; background-image:url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/358203/thumb.png'); background-size: 40px 40px; background-position:0px 0px; background-repeat: no-repeat; background-color:transparent; position:absolute; left:0px; top:0px; border:0 none; padding:0px; margin:0px; text-align:center; pointer-events:none; } .slidervalue { width:40px; height:40px; line-height:40px; color:#fff; font-family:helvetica,sans-serif; font-size:18px; position:absolute; left:0px; top:0px; border:0 none; padding:0px; margin:0px; text-align:center; pointer-events:none; } /*For IE*/ input[type=range]::-ms-track { width:100%; height:100%; -webkit-appearance:none; margin:0px; padding:0px; border:0 none; background:transparent; color:transparent; overflow:visible; } input[type=range]::-moz-range-track { width:100%;height:100%; -moz-appearance:none; margin:0px; padding:0px; border:0 none; background:transparent; color:transparent; overflow:visible; } input[type=range] { width:100%;height:100%; -webkit-appearance:none; margin:0px; padding:0px; border:0 none; background:transparent; color:transparent; overflow:visible; } input[type=range].slidervertical { -webkit-appearance: slider-vertical; writing-mode: bt-lr; /* IE */ opacity:0.01; } input[type=range]:focus::-webkit-slider-runnable-track { background:transparent; border:transparent; } input[type=range]:focus { outline: none; } input[type=range]::-ms-thumb { width:40px;height:40px; border-radius:0px; border:0 none; background:transparent; } input[type=range]::-moz-range-thumb { width:40px;height:40px; border-radius:0px; border:0 none; background:transparent; } input[type=range]::-webkit-slider-thumb { width:40px; height:40px; border-radius:0px; border:0 none; background:transparent; -webkit-appearance:none; } input[type=range]::-ms-fill-lower {background:transparent;border:0 none;} input[type=range]::-ms-fill-upper {background:transparent;border:0 none;} input[type=range]::-ms-tooltip { display: none;} body {font-family:sans-serif;} .slider2column, td, tr, th { width:400px; border:0 none !important; } 
     <table class="slider2column"> <tr><td> <div class="slidershell" id="slidershell1"> <div class="sliderfill" id="sliderfill1"></div> <div class="slidertrack" id="slidertrack1"></div> <div class="sliderthumb" id="sliderthumb1"></div> <div class="slidervalue" id="slidervalue1">0</div> <input class="slider" id="slider1" type="range" min="0" max="100" value="0" oninput="showValue(value,1,false);" onchange="showValue(value,1,false);"/> </div> </td></tr> </table>

    And in addition, here is a good site for visual processing of your own slider.

    Here is another option only with an individual image on the thumb with non-standard borders.

    Details about it.

    1. Set the width and height for the thumb with the size of the image that we want to impose on it.
    2. We take a picture but without a background, and put it on the thumb using background .

    In the example we will use this picture.

    enter image description here

    They waited.)))

    Here is an example.

     input[type=range] { -webkit-appearance: none; width: 100%; margin: 50px 0; } input[type=range]:focus { outline: none; } input[type=range]::-webkit-slider-runnable-track { width: 100%; height: 8.4px; cursor: pointer; box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; background: #3071a9; border-radius: 1.3px; border: 0.2px solid #010101; } input[type=range]::-webkit-slider-thumb { height: 50px; width: 50px; border-radius: 3px; background-color: transparent; background: url(https://i.stack.imgur.com/QneFV.png) center center no-repeat; cursor: pointer; -webkit-appearance: none; margin-top: -23px; } input[type=range]:focus::-webkit-slider-runnable-track { background: #367ebd; } input[type=range]::-moz-range-track { width: 100%; height: 8.4px; cursor: pointer; box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; background: #3071a9; border-radius: 1.3px; border: 0.2px solid #010101; } input[type=range]::-moz-range-thumb { height: 50px; width: 50px; border-radius: 3px; background-color: transparent; background: url(https://i.stack.imgur.com/QneFV.png) center center no-repeat; cursor: pointer; -webkit-appearance: none; margin-top: -23px; } input[type=range]::-ms-track { width: 100%; height: 8.4px; cursor: pointer; background: transparent; border-color: transparent; color: transparent; } input[type=range]::-ms-fill-lower { background: #2a6495; border: 0.2px solid #010101; border-radius: 2.6px; box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; } input[type=range]::-ms-fill-upper { background: #3071a9; border: 0.2px solid #010101; border-radius: 2.6px; box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; } input[type=range]::-ms-thumb { height: 50px; width: 50px; border-radius: 3px; background-color: transparent; background: url(https://i.stack.imgur.com/QneFV.png) center center no-repeat; cursor: pointer; -webkit-appearance: none; margin-top: -23px; } input[type=range]:focus::-ms-fill-lower { background: #3071a9; } input[type=range]:focus::-ms-fill-upper { background: #367ebd; } 
     <input type="range" />

    • probably it was necessary to add that instead of the thumb should be roughly a picture that is larger than the scrollbar - GicO
    • @GicO I do not understand you. - Raz Galstyan
    • i need to create such a slider
    • I apologize for offtopic, but how to refer to your nickname, if it contains a space? - GicO
    • one
      @GicO Here are two examples of what you wanted. No need to look. It will suit you. - Raz Galstyan