Cоздание индивидуального ползунка “”

Здравствуйте, необходимо сделать ползунок с индивидуальным дизайном. Поэтому input type=range не подойдет, пробовал использовать jQueryUI, но он тоже не предоставляет нужный уровень кастомотизации. В итоге пришел к варианты создание ползунка из двух объектов тега div, поэтому вопрос такой:
Существуют ли готовые библиотеки или же плагины позволяющие настроить собственный ползунок, или же придется все писать в ручную?
Заместо ползунка должна быть грубо говоря картинка

Ответ

Для того что бы стилизировать надо знать из каких частей для браузера он состоит.
Вот картинка. На котором показаны части range. И каждая часть можно стилизировать отдельно.

Вот пример с индивидуальным дизайном. Здесь на range thumb наложен div с картинкой. Правда здесь есть и js код для еще более красивой реализации прокрутки ползунка. Но вообще можно задать стили и без этого.
Здесь картинка другая чем автор хотел. но вообще принцип наверное будет понятен.
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; }

0

И в добавок вот хороший сайт для визуальной обработки собственного ползунка.
Вот другой вариант только с индивидуальным изображением на thumb с не стандартными границами.
Подробно об этом.
Задаем ширину и высоту для thumb с размерами той картинки который мы хотим наложить на него. Берем картинку но обязательно без фона, и наложим его на thumb с помощью background.
В примере будем использовать вот эту картинку.

Дождались.)))
Вот и сам пример.
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; }