Input Slider CSS not rendering as expected

Question

UPDATE 2 What was missing was the JS which updates the value property. See the accepted answer for the code.

UPDATE

So far, of all the SO answers I could find, the only one that seems to allow customizing the slider like this, is on this post. Seems like styling these pseudo-elements is far from solid. I'd love to see a non-JS solution if someone has a cross browser answer.

I've tried to use the slider styler for generating css. It looks one way on their web page but does not render independently the same way. The only thing that gets styled seems to be the slider circle.

This is how it renders on their website:

A demo is attached showing how it renders independently. Can someone help me get moving in the right direction? Thanks!

input[type=range].slider {
  height: 23px;
  -webkit-appearance: none;
}

/*progress support*/
input[type=range].slider.slider-progress {
  --range: calc(var(--max) - var(--min));
  --ratio: calc((var(--value) - var(--min)) / var(--range));
  --sx: calc(0.5 * 16px + var(--ratio) * (100% - 16px));
}

input[type=range].slider:focus {
  outline: none;
}

/*webkit*/
input[type=range].slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 1em;
  background: #FFFFFF;
  border: none;
  box-shadow: 0 0 2px black;
  margin-top: calc(max((1em - 1px - 1px) * 0.5,0px) - 16px * 0.5);
}

input[type=range].slider::-webkit-slider-runnable-track {
  height: 1em;
  border: 1px solid #b2b2b2;
  border-radius: 0.5em;
  background: #B5B5B5;
  box-shadow: none;
}

input[type=range].slider::-webkit-slider-thumb:hover {
  background: #20BBE1;
}

input[type=range].slider:hover::-webkit-slider-runnable-track {
  background: #B5B5B5;
  border-color: #9a9a9a;
}

input[type=range].slider::-webkit-slider-thumb:active {
  background: #1C89A9;
}

input[type=range].slider:active::-webkit-slider-runnable-track {
  background: #B5B5B5;
  border-color: #c1c1c1;
}

input[type=range].slider.slider-progress::-webkit-slider-runnable-track {
  background: linear-gradient(#20BBE1,#20BBE1) 0/var(--sx) 100% no-repeat, #B5B5B5;
}

input[type=range].slider.slider-progress:hover::-webkit-slider-runnable-track {
  background: linear-gradient(#20BBE1,#20BBE1) 0/var(--sx) 100% no-repeat, #B5B5B5;
}

input[type=range].slider.slider-progress:active::-webkit-slider-runnable-track {
  background: linear-gradient(#20BBE1,#20BBE1) 0/var(--sx) 100% no-repeat, #B5B5B5;
}

/*mozilla*/
input[type=range].slider::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 1em;
  background: #FFFFFF;
  border: none;
  box-shadow: 0 0 2px black;
}

input[type=range].slider::-moz-range-track {
  height: max(calc(1em - 1px - 1px),0px);
  border: 1px solid #b2b2b2;
  border-radius: 0.5em;
  background: #B5B5B5;
  box-shadow: none;
}

input[type=range].slider::-moz-range-thumb:hover {
  background: #20BBE1;
}

input[type=range].slider:hover::-moz-range-track {
  background: #B5B5B5;
  border-color: #9a9a9a;
}

input[type=range].slider::-moz-range-thumb:active {
  background: #1C89A9;
}

input[type=range].slider:active::-moz-range-track {
  background: #B5B5B5;
  border-color: #c1c1c1;
}

input[type=range].slider.slider-progress::-moz-range-track {
  background: linear-gradient(#20BBE1,#20BBE1) 0/var(--sx) 100% no-repeat, #B5B5B5;
}

input[type=range].slider.slider-progress:hover::-moz-range-track {
  background: linear-gradient(#20BBE1,#20BBE1) 0/var(--sx) 100% no-repeat, #B5B5B5;
}

input[type=range].slider.slider-progress:active::-moz-range-track {
  background: linear-gradient(#20BBE1,#20BBE1) 0/var(--sx) 100% no-repeat, #B5B5B5;
}

/*ms*/
input[type=range].slider::-ms-fill-upper {
  background: transparent;
  border-color: transparent;
}

input[type=range].slider::-ms-fill-lower {
  background: transparent;
  border-color: transparent;
}

input[type=range].slider::-ms-thumb {
  width: 16px;
  height: 16px;
  border-radius: 1em;
  background: #FFFFFF;
  border: none;
  box-shadow: 0 0 2px black;
  margin-top: 0;
  box-sizing: border-box;
}

input[type=range].slider::-ms-track {
  height: 1em;
  border-radius: 0.5em;
  background: #B5B5B5;
  border: 1px solid #b2b2b2;
  box-shadow: none;
  box-sizing: border-box;
}

input[type=range].slider::-ms-thumb:hover {
  background: #20BBE1;
}

input[type=range].slider:hover::-ms-track {
  background: #B5B5B5;
  border-color: #9a9a9a;
}

input[type=range].slider::-ms-thumb:active {
  background: #1C89A9;
}

input[type=range].slider:active::-ms-track {
  background: #B5B5B5;
  border-color: #c1c1c1;
}

input[type=range].slider.slider-progress::-ms-fill-lower {
  height: max(calc(1em - 1px - 1px),0px);
  border-radius: 0.5em 0 0 0.5em;
  margin: -1px 0 -1px -1px;
  background: #20BBE1;
  border: 1px solid #b2b2b2;
  border-right-width: 0;
}

input[type=range].slider.slider-progress:hover::-ms-fill-lower {
  background: #20BBE1;
  border-color: #9a9a9a;
}

input[type=range].slider.slider-progress:active::-ms-fill-lower {
  background: #20BBE1;
  border-color: #c1c1c1;
}

<div>
        <input type="range" class="slider slider-progress">
</div>

Nathaniel Flick · Accepted Answer · 2022-09-13T21:25:03.000

Your html is missing the class "styled-slider" which is required per that slider styler site, and I've brought over the "styled-slider" CSS so it works now (EDIT: Don't forget to also load the accompanying JS or the code won't work properly):

for (let e of document.querySelectorAll('input[type="range"].slider-progress')) {
  e.style.setProperty('--value', e.value);
  e.style.setProperty('--min', e.min == '' ? '0' : e.min);
  e.style.setProperty('--max', e.max == '' ? '100' : e.max);
  e.addEventListener('input', () => e.style.setProperty('--value', e.value));
}

/*generated with Input range slider CSS style generator (version 20211225)
https://toughengineer.github.io/demo/slider-styler*/
input[type=range].styled-slider {
  height: 2.2em;
  -webkit-appearance: none;
}

/*progress support*/
input[type=range].styled-slider.slider-progress {
  --range: calc(var(--max) - var(--min));
  --ratio: calc((var(--value) - var(--min)) / var(--range));
  --sx: calc(0.5 * 2em + var(--ratio) * (100% - 2em));
}

input[type=range].styled-slider:focus {
  outline: none;
}

/*webkit*/
input[type=range].styled-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 2em;
  height: 2em;
  border-radius: 1em;
  background: #007cf8;
  border: none;
  box-shadow: 0 0 2px black;
  margin-top: calc(max((1em - 1px - 1px) * 0.5,0px) - 2em * 0.5);
}

input[type=range].styled-slider::-webkit-slider-runnable-track {
  height: 1em;
  border: 1px solid #b2b2b2;
  border-radius: 0.5em;
  background: #efefef;
  box-shadow: none;
}

input[type=range].styled-slider::-webkit-slider-thumb:hover {
  background: #0061c3;
}

input[type=range].styled-slider:hover::-webkit-slider-runnable-track {
  background: #e5e5e5;
  border-color: #9a9a9a;
}

input[type=range].styled-slider::-webkit-slider-thumb:active {
  background: #2f98f9;
}

input[type=range].styled-slider:active::-webkit-slider-runnable-track {
  background: #f5f5f5;
  border-color: #c1c1c1;
}

input[type=range].styled-slider.slider-progress::-webkit-slider-runnable-track {
  background: linear-gradient(#007cf8,#007cf8) 0/var(--sx) 100% no-repeat, #efefef;
}

input[type=range].styled-slider.slider-progress:hover::-webkit-slider-runnable-track {
  background: linear-gradient(#0061c3,#0061c3) 0/var(--sx) 100% no-repeat, #e5e5e5;
}

input[type=range].styled-slider.slider-progress:active::-webkit-slider-runnable-track {
  background: linear-gradient(#2f98f9,#2f98f9) 0/var(--sx) 100% no-repeat, #f5f5f5;
}

/*mozilla*/
input[type=range].styled-slider::-moz-range-thumb {
  width: 2em;
  height: 2em;
  border-radius: 1em;
  background: #007cf8;
  border: none;
  box-shadow: 0 0 2px black;
}

input[type=range].styled-slider::-moz-range-track {
  height: max(calc(1em - 1px - 1px),0px);
  border: 1px solid #b2b2b2;
  border-radius: 0.5em;
  background: #efefef;
  box-shadow: none;
}

input[type=range].styled-slider::-moz-range-thumb:hover {
  background: #0061c3;
}

input[type=range].styled-slider:hover::-moz-range-track {
  background: #e5e5e5;
  border-color: #9a9a9a;
}

input[type=range].styled-slider::-moz-range-thumb:active {
  background: #2f98f9;
}

input[type=range].styled-slider:active::-moz-range-track {
  background: #f5f5f5;
  border-color: #c1c1c1;
}

input[type=range].styled-slider.slider-progress::-moz-range-track {
  background: linear-gradient(#007cf8,#007cf8) 0/var(--sx) 100% no-repeat, #efefef;
}

input[type=range].styled-slider.slider-progress:hover::-moz-range-track {
  background: linear-gradient(#0061c3,#0061c3) 0/var(--sx) 100% no-repeat, #e5e5e5;
}

input[type=range].styled-slider.slider-progress:active::-moz-range-track {
  background: linear-gradient(#2f98f9,#2f98f9) 0/var(--sx) 100% no-repeat, #f5f5f5;
}

/*ms*/
input[type=range].styled-slider::-ms-fill-upper {
  background: transparent;
  border-color: transparent;
}

input[type=range].styled-slider::-ms-fill-lower {
  background: transparent;
  border-color: transparent;
}

input[type=range].styled-slider::-ms-thumb {
  width: 2em;
  height: 2em;
  border-radius: 1em;
  background: #007cf8;
  border: none;
  box-shadow: 0 0 2px black;
  margin-top: 0;
  box-sizing: border-box;
}

input[type=range].styled-slider::-ms-track {
  height: 1em;
  border-radius: 0.5em;
  background: #efefef;
  border: 1px solid #b2b2b2;
  box-shadow: none;
  box-sizing: border-box;
}

input[type=range].styled-slider::-ms-thumb:hover {
  background: #0061c3;
}

input[type=range].styled-slider:hover::-ms-track {
  background: #e5e5e5;
  border-color: #9a9a9a;
}

input[type=range].styled-slider::-ms-thumb:active {
  background: #2f98f9;
}

input[type=range].styled-slider:active::-ms-track {
  background: #f5f5f5;
  border-color: #c1c1c1;
}

input[type=range].styled-slider.slider-progress::-ms-fill-lower {
  height: max(calc(1em - 1px - 1px),0px);
  border-radius: 0.5em 0 0 0.5em;
  margin: -1px 0 -1px -1px;
  background: #007cf8;
  border: 1px solid #b2b2b2;
  border-right-width: 0;
}

input[type=range].styled-slider.slider-progress:hover::-ms-fill-lower {
  background: #0061c3;
  border-color: #9a9a9a;
}

input[type=range].styled-slider.slider-progress:active::-ms-fill-lower {
  background: #2f98f9;
  border-color: #c1c1c1;
}

<div>
        <input type="range" class="styled-slider slider-progress">
</div>

I see that it works... but why? Where is that class referenced in the CSS? — mseifert, Aug 29 '22 at 09:40
Looking further, "styled-slider" is their default class, but when I changed it to "slider", the source generated changed all references of the class name. It makes no sense why the CSS references "slider" but the HTML needs "styled-slider". Very strange. I wonder if this is baked into the control somehow. — mseifert, Aug 29 '22 at 12:27
I copied the styled-slider css try my code snippet now; should make more sense (it looks a little different, larger circle button) — Nathaniel Flick, Aug 29 '22 at 22:24
Try replacing "styled-slider" in your CSS with anything (e.g. "xyz"). It will still work. The class in the CSS doesn't seem to matter as long as the class in the HTML is "styled-slider". Very odd — mseifert, Aug 31 '22 at 02:54
I imagine "styled-slider" captures any changes you make to the slider editor? @mseifert If there are no changes then there are no attributes under that class. — Nathaniel Flick, Aug 31 '22 at 19:23
Actually, the problem was that I didn't include the JS. Somehow I missed that in the original site's instructions and in your code. I came back to it fresh and there it was. Thank you. It had nothing to do with my classes being incorrect. — mseifert, Sep 13 '22 at 21:04

Input Slider CSS not rendering as expected

1 Answers1