Проблема с нестандартным дизайном слайдера
Я хочу создать собственный HTML-слайдер <input type = "range">, который имеет несколько цветных конечных точек, например:
В настоящее время я могу добиться результата, показанного на картинке, следующим образом:
input[type = "range"] {
&:before{
content:'';
position:absolute;
background-color:red;
// width, height, positioning, ...
}
&:after{
content:'';
position:absolute;
background-color:green;
...
}
При перемещении ручки в начало или конец диапазона получается следующее:
Пытаясь изменить z-index, я могу закрасить цветные точки только перед ползунком или позади него.
Я также попытался дать разные значения z-index классам, зависящим от браузера (например, ::-webkit-slider-runnable-track, ::-webkit-slider-thumb, ...), но это тоже не помогло.
Можно ли закрасить цветные точки «между» направляющей и ручкой так, чтобы точка находилась наверху направляющей, а ручка закрывала ее?
Я создал для него скрипку: jsfiddle.net/rnsh4wax В настоящее время он работает только для Chrome
Ответы 1
input[type = "range"]:before{
content:'';
z-index: 5;
position:absolute;
width: 10px;
height: 10px;
top: 10px;
left:-10px;
background-color:red;
}
input[type = "range"]:after{
content:'';
z-index: -1;
position:absolute;
width: 10px;
height: 10px;
right: -10px;
top: 10px;
background-color:green;
}
Вы не можете поместить элементы :before и :after за родительскими элементами. Так что, может быть, если вы поместите элементы :before/:after до и после шкалы диапазона с left:-10px; и right: -10px;, ваша проблема будет решена?
Большое тебе спасибо. Это действительно могло бы быть альтернативным решением, если бы не было другого пути. Но это не лучший способ, так как цветные точки тогда не закрываются ручкой, но видны помимо нее, когда выбрано минимальное / максимальное значение.
если вы действительно хотите, чтобы эти элементы находились за белым квадратом, вам нужно поставить 2 диапазона до и после ввода диапазона и дать нам стиль. Это тоже может быть хорошо ..
Можете ли вы скопировать и вставить полный код, чтобы я мог это исправить