Input Slider CSS not rendering as expected

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>

Solution

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>