Cоздание индивидуального ползунка “<input type=”range“>”
366
15 января 2018, 10:16
Здравствуйте, необходимо сделать ползунок с индивидуальным дизайном.
Поэтому input type=range не подойдет, пробовал использовать jQueryUI, но он тоже не предоставляет нужный уровень кастомотизации. В итоге пришел к варианты создание ползунка из двух объектов тега div, поэтому вопрос такой:
Существуют ли готовые библиотеки или же плагины позволяющие настроить собственный ползунок, или же придется все писать в ручную?
Заместо ползунка должна быть грубо говоря картинка
Answer 1
Для того что бы стилизировать <input type="range"> надо знать из каких частей для браузера он состоит.
Вот картинка. На котором показаны части 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;
}<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>И в добавок вот хороший сайт для визуальной обработки собственного ползунка.
Вот другой вариант только с индивидуальным изображением на 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;
}<input type="range" />
-
13:29
Кофе для программистов: как напиток влияет на продуктивность кодеров?
-
22:13
Рекламные вывески: как привлечь внимание и увеличить продажи
-
19:13
-
16:04
Стратегії та тренди в SMM - Технології, що формують майбутнє сьогодні
-
17:27
Выделенный сервер, что это, для чего нужен и какие характеристики важны?
-
22:17
-
18:08
Современные решения для бизнеса: как облачные и виртуальные технологии меняют рынок
-
18:54
-
17:35
ТОП-10
- Почему SERVER_ADDR имеет не тот IP 47938 visits
- Как заменить $_SERVER[REMOTE_ADDR] на IP клиента в PHP за двумя Nginx? 30568 visits
- Хочу вывести несколько строк из массива в один div, выводит только много undefined; подскажите, что делать? 23917 visits
- Как через css изменить цвет png изображения? 10408 visits
- Blob video url download 10006 visits
- Php curl запрос через прокси с авторизацией 9282 visits
- Работа с captcha vk api 8149 visits
© "hostciti.net" 01.4.2025 | 02:38