Пример:
HTML:
Для каждого <input type="range"/> задается:
min - минимальное значение ползунка;
max - максимальное значение ползунка;
step - шаг изменения ползунка;
value - начальное значение ползунка.
|
1 2 3 4 5 6 7 8 9 10 |
<div class="range-wrap"> <div class="range-slider"> <div class="label-range">от 1 до 10 с шагом 1</div> <input id="range1" type="range" name="range1" min="1" max="10" step="1" value="5" /> <div class="label-range">от 4 до 32 с шагом 2</div> <input id="range2" type="range" name="range2" min="4" max="32" step="2" value="16" /> <div class="label-range">от 0 до 100 с шагом 5</div> <input id="range3" type="range" name="range3" min="0" max="100" step="5" value="50" /> </div> </div> |
CSS:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 |
.range-wrap { background: #ededed; margin: 20px 0; border: 8px solid #BFE2FF; box-shadow: 0 4px 12px rgba(0,0,0,0.2), 0 16px 20px rgba(0,0,0,0.2); } .range-slider * { margin: 0; padding: 0; border: 0; } .range-slider, .range-ticks, .label-range{ display: flex; } .range-slider { flex-flow: column nowrap; margin: 0 auto; max-width: 18em; padding: 0 1.5em 1.5em 1.5em; font-size: calc(20px + (20)*(100vw)/(2000)); box-sizing: border-box; } .range-slider input[type=range], .range { border-radius: 0.75em; overflow: hidden; position: relative; height: 1.5em; } .range-slider input[type=range] { background-color: transparent; font: 1em/1.5 'Roboto', sans-serif; box-shadow: 0.3em 0.3em 0.4em #c1c2c5 inset, -0.3em -0.3em 0.4em #fff inset; display: block; padding: 0 0.1em; width: 100%; -webkit-appearance: none; -moz-appearance: none; appearance: none; } .range-slider input[type=range]:focus { outline: transparent; } .range-ticks { font: 1em/1.5 'Roboto', sans-serif; justify-content: space-between; align-items: center; pointer-events: none; position: absolute; top: 0.04em; left: 0.75em; width: calc(100% - 1.5em); height: 100%; } .range-tick, .range-tick-text { display: inline-block; } .range-tick { color: #454954; font-size: 0.5em; text-align: center; width: 0; -webkit-user-select: none; -moz-user-select: none; user-select: none; } .range-tick-text { transform: translateX(-50%); } .label-range { font: 0.8em/1.5 'Roboto', sans-serif; margin-top: 1em; margin-bottom: 0.5em; } .data-range { display: flex; height: 3em; width: 3em; justify-content: center; align-items: center; text-align: center; font: bold 0.5em/1.5 'Roboto', sans-serif; color: #FFF; position: absolute; top: 0; z-index: 2; pointer-events: none; background-color: #337AB7; border: 0; border-radius: 50%; box-shadow: -0.3em -0.3em 0.5em #0d518c inset, 0 -0.2em 0.2em 0 rgba(0,0,0,0.2), 0.3em 0.5em 0.8em rgba(0,0,0,0.3); } |
JS:
Для каждого <input type="range"/> задается:
element - ID ползунка;
tick - шаг линейки.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 |
window.addEventListener("DOMContentLoaded",() => { let range1 = new rSlider({ element: "#range1", tick: 1 }), range2 = new rSlider({ element: "#range2", tick: 4 }), range3 = new rSlider({ element:"#range3", tick: 10 }); }); class rSlider { constructor(args) { this.el = document.querySelector(args.element); this.min = +this.el.min || 0; this.max = +this.el.max || 100; this.step = +this.el.step || 1; this.tick = args.tick || this.step; this.addTicks(); this.dataRange = document.createElement("div"); this.dataRange.className = "data-range"; this.el.parentElement.appendChild(this.dataRange,this.el); this.updatePos(); this.el.addEventListener("input",() => { this.updatePos(); }); } addTicks() { let wrap = document.createElement("div"); wrap.className = "range"; this.el.parentElement.insertBefore(wrap,this.el); wrap.appendChild(this.el); let ticks = document.createElement("div"); ticks.className = "range-ticks"; wrap.appendChild(ticks); for (let t = this.min; t <= this.max; t += this.tick) { let tick = document.createElement("span"); tick.className = "range-tick"; ticks.appendChild(tick); let tickText = document.createElement("span"); tickText.className = "range-tick-text"; tick.appendChild(tickText); tickText.textContent = t; } } getRangePercent() { let max = this.el.max, min = this.el.min, relativeValue = this.el.value - min, ticks = max - min, percent = relativeValue / ticks; return percent; } updatePos() { let percent = this.getRangePercent(), left = percent * 100, emAdjust = percent * 3; this.dataRange.style.left = `calc(${left}% - ${emAdjust}em)`; this.dataRange.innerHTML = this.el.value; } } |
За основу взято решение, найденное на codepen.io у пользователя Jon Kantner
я на сайте использую одинаковых несколько ползунков.
let range1 = new rSlider({
element: "#range1",
tick: 1
}),
для каждого нужно такой скрипт прописать, как можно одним скриптом обойтись, по классу не работает.
Нужно переписывать JS, чтобы он считал и работал со всеми элементами по классу, а не с одним, конкретно указанным.
Можно-ли сделать слайдер с переменным шагом, например, чтобы он перемещался по значениям 1,2,4,8?
Используйте радиокнопки, например:
Плавное переключение радиокнопок или Слайдер для radio кнопок
Там можно обозвать и задать значение как угодно
Спасибо.