Цветная часть дорожки в ползунке диапазона - PullRequest
Новая
       36

Цветная часть дорожки в ползунке диапазона

0 голосов
/ 23 марта 2020

У меня есть ползунок диапазона, для которого я хочу иметь возможность окрашивать часть дорожки независимо от того, где находится ползунок. Например, если ползунок находится на 26-й отметке на дорожке диапазона 1–100, я хочу раскрасить, скажем, 50–60 частей дорожки. Является ли это возможным?

Что-то вроде:

This Image

Примечание: деталь, которую я хочу закрасить (50-60), является расчетным значением. Код доступен на CodePen : 

var min_slider = document.getElementById("min-slider");
var min_output = document.getElementById("min-output");
min_output.innerHTML = min_slider.value;

min_slider.oninput = function() {
  min_output.innerHTML = min_slider.value;
}
.slidecontainer {
  width: 100%;
  height: 50px;
  margin: 0;
  position: relative;
  pointer-events: none;
}

.slider1 {
  width: 100%;
  position: absolute;
  z-index: 1;
  left: 0;
  top: 0;
  height: 50px;
}

.slider {
  -webkit-appearance: none;
  -moz-appearance: none;
  pointer-events: none;
  opacity: 1;
  width: 100%;
  height: 10px;
  border: 0;
  border-radius: 5px;
  margin: 0;
  padding: 0;
  background: #d3d3d3;
  outline: none;
  -webkit-transition: .2s;
  transition: opacity .2s;
  outline: none;
}

.slider::-webkit-slider-runnable-track {
  cursor: default;
  outline: 0;
  -webkit-appearance: none;
}

.slider::-moz-range-track {
  cursor: default;
  -moz-appearance: none;
  outline: 0;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  pointer-events: auto;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #1BA94C;
  cursor: pointer;
}

.slider::-moz-range-thumb {
  -moz-appearance: none;
  pointer-events: auto;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #1BA94C;
  cursor: pointer;
}
<h1>Range Slider</h1>

<div class="slidecontainer">
  <div class="slider1">
    <input type="range" min="1" max="100" value="25" class="slider" id="min-slider">
  </div>
  <br/>
  <p>Value: <span id="min-output"></span></p>
</div>

Ответы [ 2 ]

0 голосов
/ 24 марта 2020

Я получил это работает. Вот что я искал: 

.slider{
    background: linear-gradient(90deg, grey 0%, grey 50%, red 50%, red 60%, grey 60%, grey 100%);
}
0 голосов
/ 23 марта 2020

Ваш алгоритм не совсем понятен, но я думаю, что я установил правильное направление для экспериментов. Вы можете заполнить отрезок, используя linear-gradient(). Управляйте положением и размером сегмента из скрипта, используя CSS переменные : 

var min_slider = document.getElementById("min-slider");
var min_output = document.getElementById("min-output");
min_output.innerHTML = min_slider.value;

min_slider.oninput = function() {
  min_output.innerHTML = min_slider.value;
  
  /* Controlling the position of a segment */
  min_slider.style.setProperty('--color_pos-start', parseInt(min_slider.value) / 2);
  min_slider.style.setProperty('--color_pos-end', parseInt(min_slider.value) / 2 + 10);
};
.slidecontainer {
  width: 100%;
  height: 50px;
  margin: 0;
  position: relative;
  pointer-events: none;
}

.slider1 {
  width: 100%;
  position: absolute;
  z-index: 1;
  left: 0;
  top: 0;
  height: 50px;
}

.slider {
  -webkit-appearance: none;
  -moz-appearance: none;
  pointer-events: none;
  opacity: 1;
  width: 100%;
  height: 10px;
  border: 0;
  border-radius: 5px;
  margin: 0;
  padding: 0;
  outline: none;
  -webkit-transition: 0.2s;
  transition: opacity 0.2s;
  outline: none;
  background-color: #d3d3d3;
  
  /* Variables and gradient for segment */
  --color_pos-start: 12.5;
  --color_pos-end: 22.5;
  background-image: linear-gradient(90deg, 
    transparent calc(var(--color_pos-start, 12.5) * 1% - 1px), 
    #3d00b8 calc(var(--color_pos-start, 12.5) * 1%), 
    #ff9800 calc(var(--color_pos-end, 22.5) * 1%), 
    transparent calc(var(--color_pos-end, 22.5) * 1% + 1px));
}

.slider::-webkit-slider-runnable-track {
  cursor: default;
  outline: 0;
  -webkit-appearance: none;
}

.slider::-moz-range-track {
  cursor: default;
  -moz-appearance: none;
  outline: 0;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  pointer-events: auto;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #1ba94c;
  cursor: pointer;
}

.slider::-moz-range-thumb {
  -moz-appearance: none;
  pointer-events: auto;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #1ba94c;
  cursor: pointer;
}
<h1>Range Slider</h1>

<div class="slidecontainer">
  <div class="slider1">
    <input type="range" min="1" max="100" value="25" class="slider" id="min-slider">
  </div>
  <br />
  <p>Value: <span id="min-output"></span></p>
</div>
...