Skip to content

Instantly share code, notes, and snippets.

@davidaurelio
Created March 27, 2020 07:56
Show Gist options
  • Save davidaurelio/0dfd5f74de70daf9473819651a01b95f to your computer and use it in GitHub Desktop.
Save davidaurelio/0dfd5f74de70daf9473819651a01b95f to your computer and use it in GitHub Desktop.
Slider with filled track – gradients
/**
* Slider with filled track – gradients
*/
.slider {
height: 32px;
position: relative;
--fill-start: 0.5;
--gap: 4px;
--progress: 0.5;
--size: 16px;
}
.handle {
border: 2px solid #777;
border-radius: calc(var(--size) / 2);
height: var(--size);
left: calc(var(--progress) * (100% - var(--size)));
position: absolute;
top: calc(50% - var(--size) / 2);
width: var(--size);
}
.track {
--gap-start: calc((100% - var(--size)) * var(--progress) - var(--gap));
--gap-end: calc((100% - var(--size)) * var(--progress) + var(--size) + var(--gap));
--fill: calc((100% - var(--size)) * var(--fill-start) + var(--size) / 2);
background-image: linear-gradient(90deg, transparent var(--fill), #777 var(--fill), #777 var(--gap-start), transparent var(--gap-start)),
linear-gradient(90deg, transparent var(--gap-end), #777 var(--gap-end), #777 var(--fill), transparent var(--fill)),
linear-gradient(90deg, #ccc var(--gap-start), transparent var(--gap-start), transparent var(--gap-end), #ccc var(--gap-end));
border-radius: 1px;
height: 2px;
position: absolute;
top: calc(50% - 1px);
width: 100%;
}
#inputs label {
display: block;
margin: 1.5rem 0;
}
#inputs input {
margin: 0;
width: 100%;
}
* {
box-sizing: border-box;
}
body {
font: 1em/1.5 sans-serif;
margin: 20px;
max-width: 400px;
}
<div class=slider>
<div class=track></div>
<div class=handle></div>
</div>
<div id=inputs>
<label>
Slider Value
<input type=range name=progress min=0 max=1 step=0.01>
</label>
<label>
Fill Start
<input type=range name=fill-start min=0 max=1 step=0.01>
</label>
</div>
document.getElementById("inputs").oninput = ({currentTarget, target}) => {
let {name, value} = target;
const {style} = currentTarget.previousElementSibling;
if (name === "fill-start" && (value == 1 || value == 0)) {
value = value * 3 - 1;
}
style.setProperty(`--${name}`, value)
};
{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment