Skip to content

Instantly share code, notes, and snippets.

@davepermen

davepermen/range slider.css

Created July 9, 2023 16:56
Show Gist options
  • Save davepermen/535dbe0c0e67fdf02a1ca331d37e8fa4 to your computer and use it in GitHub Desktop.
Save davepermen/535dbe0c0e67fdf02a1ca331d37e8fa4 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
range slider.css
/* reset */
input[type=range], input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
}
input[type=range] {
width: 100%;
height: 2rem;
background: #333;
border-radius: 1rem;
box-shadow: 0 0.25rem 0.5rem inset #111;
}
input[type=range]::-webkit-slider-runnable-track {
/* best to not style this but instead draw everything into input[type=range] */
/* this controls the slider position and range */
}
input[type=range]::-webkit-slider-thumb {
background: #abf;
width: 2rem;
height: 2rem;
border-radius: 1rem;
transition: all linear 0.25s;
}
input[type=range]::-webkit-slider-thumb:hover {
box-shadow: 0 0 0.5rem #abf;
}
Raw
range slider.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<input type=range min=0 max=1 step=0.001>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment