How to change color, size and shape of elements in a range slider?

I don't have any expertise in coding or web development. After hours of research in Google, I ended up writing a set of (perfectly working) codes to build a range slider with HTML, CSS and JS.

I'm using this slider to change media volume in my smartphone, in this Media Control Panel created using an Android application called Tasker. My slider is functional, but I want to make some cosmetic changes to my slider.

Could someone please help me to implement following into my code?

Color / gradient of the slider portion before the thumb.
Color / gradient of the slider portion after the thumb.
Size, shape, color, and opacity of the thumb.

This is the current code. Feel free to edit this.

<div class = "container">
    <input type="range" 
    min="0" 
    max="25" 
    step="any" 
    value="%VOLM" 
    id="volm">
</div>

<style>
.container{
    display:flex;
    width:100%;
    padding-top:5
}

#volm{
    -webkit-appearance: none;
    background-color: magenta;
    border-radius: 2px;
    width:153px;
    height:5px;
</style>

<script>
    var slider = document.getElementById("volm");
    slider.addEventListener("input",function() 
{
    performTask("WebView Slider - Media Volume",1,slider.value,)}, false);
</script>

Solution

HTML Range Input has the following two pseudo-elements:

-webkit-slider-runnable-track
-webkit-slider-thumb

You can style them using the pseudo-selectors. This CodePen has a clever solution in achieving what you intend. By using box-shadows on the thumb, you can style the area before and after the thumb. Use multiple box-shadows + blurring to achieve gradient-like effects.

I edited your code a little to show how the above can be achieved. Rest is just about preferences on how you want the slider to look like. You can also use JavaScript to dynamically change property values depending on the input.

.container{
    display:flex;
    width:100%;
    padding-top:5;
    height: fit-content;
}

#volm{
    position: relative;
    margin-top: 5px;
    border-radius: 2px;
    width:153px;
    height: 5px;
    -webkit-appearance: none;
}
input::-webkit-slider-runnable-track {
  -webkit-appearance: none;
  position: relative;
  box-sizing: border-box;
  background-color: hsl(0deg, 0%, 90%);
  width: 100%;
  height: 20px;
  border-radius: 5px;
  overflow: hidden;
} 
input::-webkit-slider-thumb {
  position: relative;
  left: initial;
  bottom: 5px;
  -webkit-appearance: none;
  background-color: blue;
  width: 20px;
  height: 20px;
  border-radius: 20px;
  box-shadow: -340px 0 0 320px #1597ff, inset 0 0 0 40px #1597ff, 340px 0 0 320px #00f18f, inset 0 0 0 40px #1597ff;
  margin-top: 5px;
}

<div class = "container">
    <input type="range" 
    min="0" 
    max="25" 
    step="any" 
    value="%VOLM" 
    id="volm">
</div>