Looking for information on how to change the slider color depending upon what side of the dragable portion it is on, such as how the HTML5 video player slider does.

I've looked around for a bit and haven't found anything for pure JS solutions, only JQUERY, which I can't use. Any suggestions?

Looking for information on how to change the slider color depending upon what side of the dragable portion it is on, such as how the HTML5 video player slider does.

I've looked around for a bit and haven't found anything for pure JS solutions, only JQUERY, which I can't use. Any suggestions?

• javascript
• html
• css
• rangeslider

• Have you tried making a function, so that when it reach a certain point the color changes? ie When slider is 25% it is yellow, when it reach 50% it is red, etc – Xion Commented Dec 11, 2018 at 19:15
• I'm specifically looking to have the left side of the slider be red, with the right being gray (as an example). – Steichen Commented Dec 11, 2018 at 19:16
• You will need to hide the input, and have a div that looks like a slider that modifies the actual slider value – Get Off My Lawn Commented Dec 11, 2018 at 19:18
• That's what I was fearing. Thanks! – Steichen Commented Dec 11, 2018 at 19:23
• Actually I was wrong. See my answer. – Get Off My Lawn Commented Dec 11, 2018 at 19:25

1 Answer 1

Depending on the design you can achieve this with pure CSS too:

input[type='range'] {
  -webkit-appearance: none;
  background-color: #ddd;
  height: 20px;
  overflow: hidden;
  width: 400px;
}

input[type='range']::-webkit-slider-runnable-track {
  -webkit-appearance: none;
  height: 20px;
}

input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none;
  background: #333;
  border-radius: 50%;
  box-shadow: -210px 0 0 200px #666;
  cursor: pointer;
  height: 20px;
  width: 20px;
  border: 0;
}

input[type='range']::-moz-range-thumb {
  background: #333;
  border-radius: 50%;
  box-shadow: -1010px 0 0 1000px #666;
  cursor: pointer;
  height: 20px;
  width: 20px;
  border: 0;
}

input[type="range"]::-moz-range-track {
  background-color: #ddd;
}
input[type="range"]::-moz-range-progress {
  background-color: #666;
  height: 20px
}
input[type="range"]::-ms-fill-upper {
  background-color: #ddd;
}
input[type="range"]::-ms-fill-lower {
  background-color: #666;
}

<input type="range"/>

Also as this utilises overflow: hidden on the input you would not be able to have a bigger thumb than track.

Hence if the design is more specific I can also remend noUISlider it doesn't use jQuery