Divide HTML range input track to parts

Question

I have a simple HTML range input component and I would like to divide the track to three different parts. I have a range of 0 to 75 in the component. I would like to style 0 to 25 as green, 26 to 50 as yellow and 51 to 75 as red irrespective of the input value, ie., the colors are constant. Is it possible to it? Here is the working jsfiddle

var p = document.getElementById("price"),
    res = document.getElementById("result");

p.addEventListener("input", function() {
    res.innerHTML =  p.value;
}, false);

<div style="margin-top: 1em">
    <h2>Price</h2>
    0<input id="price" type="range" min="0" max="75" value="" />75
</div>

<p id="result"></p>

Take a look at this: https://codepen.io/gabrieltomescu/pen/GsbIi Or is this to complicated for your task? — Nebulosar, Oct 05 '17 at 14:22
@Nebulosar I have already seen this example, and it is not exactly what I'm looking for. I don't want the colors to overlap — Brr Switch, Oct 05 '17 at 14:23
Releated? - https://stackoverflow.com/questions/29373277/how-to-change-the-color-of-track-for-range-input-using-jquery-javascript — Paulie_D, Oct 05 '17 at 14:24
@Paulie_D Not really, the colors on the track should constants. — Brr Switch, Oct 05 '17 at 14:27
@Paulie_D I have updated my question by adding a picture for better understanding — Brr Switch, Oct 05 '17 at 14:31
gradient is the way to go i think, some tinkerering http://jsfiddle.net/Nebulosar/JnrvG/1003/ might get you there. If you always have these three positions it is just 33%, 33%, 33% — Nebulosar, Oct 05 '17 at 14:35
+1 to @Nebulosar commented solution - gradient is absolutely the way to go. Simple, pure CSS, no markup revs needed. — random_user_name, Oct 05 '17 at 14:36

Paulie_D · Accepted Answer · 2017-10-05T14:45:02.127

5

With a linear-gradient background

body {
text-align:center;
}  

#range::-webkit-slider-runnable-track {
  width: 300px;
  height: 10px;
  background: linear-gradient(to right, green, green 25%, yellow 25%, yellow 50%, red 51%);
  border: none;
  border-radius: 3px;
}

#range::-moz-range-track {
  width: 300px;
  height: 10px;
  background: linear-gradient(to right, green, green 25%, yellow 25%, yellow 50%, red 51%);
  border: none;
  border-radius: 3px;
}

<input id="range" type="range">

edited Oct 05 '17 at 14:45

answered Oct 05 '17 at 14:38

Paulie_D

107,962
13
142
161

In FF55 the gradient is quite broad, with the draggable part only going from a yellow to half way red :) – Martijn Oct 05 '17 at 14:41
Seems to have been a `margin` issue...fixed. – Paulie_D Oct 05 '17 at 14:47
Still not working for me, sorry. And yes, the principle is important, but giving a broken solution isn't really StackOverflow-style :) – Martijn Oct 05 '17 at 14:52
linear-gradient(to right, green 33%, yellow 34%, yellow 66%, red 67%) would fix the issue, I'm waiting for my edit to get peer reviewed – Brr Switch Oct 05 '17 at 14:53
2

Fiddled a bit with your snippet, changing width:300px to 100% seems to fix it :) – Martijn Oct 05 '17 at 14:55
Thank you @Paulie_D – Brr Switch Oct 05 '17 at 14:57
Thank you @Martijn – Brr Switch Oct 05 '17 at 14:58
1/3 each does not match your initial requirements. – Paulie_D Oct 05 '17 at 15:08

Divide HTML range input track to parts

1 Answers1