JSFiddle - React, Tailwind, and code Playground

by softvar

HTML

<input type=range min=1 max=100 step=1 value=20>
  
<input type="range" id="set-scaleY" min="1" max="10" value="1" step=".1">

CSS

body {
    margin: 20px;
}
input[type="range"]{
    -webkit-appearance: none;
    -moz-apperance: none;
    width: 200px;
    height: 10px;
    padding: 0;

    background: #024069;
    border-radius: 2px;
    margin-top: 25px;
    background-image: -webkit-gradient(
        linear,
        left top,
        right top,
        color-stop(0.2, #0B8CDD),
        color-stop(0.2, #898989)
    );
}


input[type="range"]::-webkit-slider-thumb{
    -webkit-appearance:none; 
    -moz-apperance:none; 
    width:20px; 
    height:20px;
    -webkit-border-radius:20px; 
    -moz-border-radius:20px; 
    -ms-border-radius:20px; 
    -o-border-radius:20px; 
    border-radius:20px;
    background: #fff;
    border: 1px solid #787878;
}

JavaScript

$('input[type="range"]').change(function () {
    //`this` inside the handler refers to the current input element
    var value = (this.value - this.min) / (this.max - this.min);
    //use `.css()` to set the css properties
    console.log(this.value);
    $(this).css('backgroundImage', [
        '-webkit-gradient(',
        'linear, ',
        'left top, ',
        'right top, ',
        'color-stop(' + value + ', #0B8CDD), ',
        'color-stop(' + value + ', #898989)',
        ')'].join(''));
});