<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:2;
    height: fit-content;}

#volm{
    position: relative;
    margin-top: 5px;
    width:153px;
    border-radius: 3px;
    height: 5px;
    -webkit-appearance: none;}

input::-webkit-slider-runnable-track {
    -webkit-appearance: none;
    position: relative;
    box-sizing: border-box;
    width: 100%;
    height: 6px;
    border-radius: 3px;
    overflow: hidden;}

input::-webkit-slider-thumb {
    position: relative;
    left: initial;
    bottom: 10px;
    -webkit-appearance: none;
    width: 0px;
    height: 20px;
    box-shadow: -330px 0 0 330px #96ccfd, inset 0 0 0 40px #1597ff, 330px 0 0 330px #1597ff, inset 0 0 0 40px #1597ff;
    margin-top: 5px;}
</style>

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