How to make a range slider's thumb in big circular shape and make it appear over the slider track?

Question

My code is almost ready but I am stuck at one point. It is a range slider with custom values. Means when we move its thumb, it will show the values we have entered in code.

This is how I want slider and its thumb

But this is what till now I am able to achieve- result

This is the code I am using here- HTML:

<p style='background-color:teal; width:300px; height:250px;'>Number: <output id="ageValue">28</output><br/></br>
<input id="ageSlider" class='range' type="range" min="25" max="30" step="1" value="28" oninput="ageSliderChange(this.value)" onmousemove="ageSliderChange(this.value)" style="width: 200px"></br></br>
Output: <output id="premiumValue">4,565</output><br/>
</p>

CSS:

.range{
-webkit-appearance: none;
 height:10px; 
 width:15px; 
 border-radius:15px; 
 overflow:hidden; 
 outline:none;
}
.range::-webkit-slider-thumb {
-webkit-appearance: none;
background:gray;
width:12px; 
height:12px; 
border-radius:50%;
box-shadow:-407px 0 0 400px #fda62d;
cursor:pointer;
}

Javascript:

function ageSliderChange(ageSlider) {

var age = document.getElementById("ageSlider").value

document.getElementById('ageValue').innerHTML = ageSlider;

    if (age == 25) {
        document.getElementById("premiumValue").innerHTML = '3,740'
        } 
        else if(age == 26){
        document.getElementById("premiumValue").innerHTML = '3,863'
        } 
        else if(age == 27){
        document.getElementById("premiumValue").innerHTML = '4,004'
        }
        else if(age == 28){
        document.getElementById("premiumValue").innerHTML = '4,167'
        } 
        else if(age == 29){
        document.getElementById("premiumValue").innerHTML = '4,353'
        } 
        else if(age == 30){
        document.getElementById("premiumValue").innerHTML = '4,565'
        } 
        else {
        document.getElementById("premiumValue").innerHTML = ''
            }
    }

Now what's the proper solution to make a slider thumb bigger and make it appear circular over the track like shown in first image? Thanks in advance.

Answer 1

you need to add a custom style element whose size you can change using JS code. I have added a function to change the style so that you can leverage that to change the style dynamically if needed.

 var slider = document.getElementById("ageSlider"); var style = document.querySelector('[data="test"]'); setData(50); // set value in this function to make your thumb bigger or smaller. function setData(x) { style.innerHTML = ".range::-webkit-slider-thumb { width: " + x + "px !important; height: " + x + "px !important; }"; } function ageSliderChange(ageSlider) { var age = document.getElementById("ageSlider").value document.getElementById('ageValue').innerHTML = ageSlider; if (age == 25) { document.getElementById("premiumValue").innerHTML = '3,740' } else if (age == 26) { document.getElementById("premiumValue").innerHTML = '3,863' } else if (age == 27) { document.getElementById("premiumValue").innerHTML = '4,004' } else if (age == 28) { document.getElementById("premiumValue").innerHTML = '4,167' } else if (age == 29) { document.getElementById("premiumValue").innerHTML = '4,353' } else if (age == 30) { document.getElementById("premiumValue").innerHTML = '4,565' } else { document.getElementById("premiumValue").innerHTML = '' } }

 .range { margin-top: 40px; -webkit-appearance: none; width: 100%; height: 15px; border-radius: 5px; background: #d3d3d3; outline: none; } .range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 25px; height: 25px; border-radius: 50%; background: #4CAF50; cursor: pointer; }

 <p style='background-color:teal; width:300px; height:250px;'>Number: <output id="ageValue">28</output><br/></br> <!--Add your custom style element here which we will change using JS --> <style data="test" type="text/css"></style> <input id="ageSlider" class='range' type="range" min="25" max="30" step="1" value="28" oninput="ageSliderChange(this.value)" onmousemove="ageSliderChange(this.value)" style="width: 200px"></br> </br> Output: <output id="premiumValue">4,565</output><br/> </p>