Question 300833 in Html Question posted in
Some basic documentation can be found here.

Html – Centering range slider thumb on track (webkit)

I’m trying to customize the default range slider for webkit to something that suits me better. I found this website which allowed me to come up with the following:

input[type="range"]::-webkit-slider-runnable-track 
{
height: 5px;
background: pink;
border-radius: 16px;
}

input[type="range"]::-webkit-slider-thumb
{
height: 20px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="styles.css">
</head>

<body>
<p>Audio settings:</p>

<div>
    <input type="range" id="volume" name="volume" min="0" max="11" />
    <label for="volume">Volume</label>
</div>

<div>
    <input type="range" id="cowbell" name="cowbell" min="0" max="100" 
        value="90" step="10" />
<label for="cowbell">Cowbell</label>
</div>
</body>
</html>

However, as you can probably observe the thumb isn’t centered on the track. So I did some searching and found this page which claims that the following formula should center the thumb on the track:

margin-top = (track height in pixels / 2) – (thumb height in pixels /2)

I tried this, but the thumb is still not centered on the track:

input[type="range"]::-webkit-slider-runnable-track 
{
height: 5px;
background: pink;
border-radius: 16px;
}

input[type="range"]::-webkit-slider-thumb
{
margin-top: calc((5px / 2) - (20px / 2));
height: 20px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="styles.css">
</head>

<body>
<p>Audio settings:</p>

<div>
    <input type="range" id="volume" name="volume" min="0" max="11" />
    <label for="volume">Volume</label>
</div>

<div>
    <input type="range" id="cowbell" name="cowbell" min="0" max="100" 
        value="90" step="10" />
<label for="cowbell">Cowbell</label>
</div>
</body>
</html>

As you can probably observe, I think the formula is wrong and does not center the thumb on the track.

Is there a formula for this? I’d like to be able to play around with the sizes until I find one that suits me best. Some explanation of why the formula works would be helpful also.

Tags:

2

Answers


  1. 0 
    input[type="range"]::-webkit-slider-thumb {
height: 20px;
position: relative;
top: -6px;

    }

    Just update this css code

    Login or Signup to reply.
  2. 0

    Don’t play with the height, adjust only the background property

    input[type="range"]::-webkit-slider-runnable-track {
  background: linear-gradient(pink 0 0) 50%/100% 5px no-repeat;
}

input {
  appearance: none;
}
    <div>
  <input type="range" id="volume" name="volume" min="0" max="11" />
  <label for="volume">Volume</label>
</div>

<div>
  <input type="range" id="cowbell" name="cowbell" min="0" max="100" value="90" step="10" />
  <label for="cowbell">Cowbell</label>
</div>

    If you want more advanced styling that works across browsers, check this: https://www.sitepoint.com/css-custom-range-slider/

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search