CODEWITHSUNDEEP
javascriptcsssliderrange
Deo
Deo

Reputation: 33

Color part of the track in range slider

I have a range slider for which I want to be able to color a part of the track, regardless of where the slider is. For example, if the slider is on 26th mark on a 1-100 range track, I want to color, say 50-60 portion of the track. Is it possible?

Something like:

This Image

Note: the part I want to color (50-60) is a calculated value. The code is available on 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>

Upvotes: 0

Views: 377

Answers (2)

Deo
Deo

Reputation: 33

I got it working. This is what i was looking for:

.slider{
    background: linear-gradient(90deg, grey 0%, grey 50%, red 50%, red 60%, grey 60%, grey 100%);
}

Upvotes: 0

UModeL
UModeL

Reputation: 1227

Your algorithm is not entirely clear, but I think that I set the right direction for the experiments. You can fill in a line segment using a linear-gradient(). Control the position and size of the segment from the script using CSS variables:

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>

Upvotes: 1

Related Questions