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>