Last active
March 25, 2020 16:21
-
-
Save davidaurelio/7404c9e4f5a8d0348caa9191b57a050b to your computer and use it in GitHub Desktop.
Slider with filled track
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* Slider with filled track | |
*/ | |
.slider { | |
height: 32px; | |
position: relative; | |
--fill-start: 0.5; | |
--gap: 4px; | |
--progress: 0.5; | |
--size: 16px; | |
} | |
.handle { | |
border: 2px solid grey; | |
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-before, .track-after { | |
background-color: #ccc; | |
border-radius: 1px; | |
height: 2px; | |
position: absolute; | |
top: calc(50% - 1px); | |
} | |
.track-before { | |
--stop: calc( var(--fill-start) * ((100% + var(--gap)) / var(--progress)) + var(--size) / 2 ); | |
background-image: linear-gradient(90deg, transparent var(--stop), #777 var(--stop)); | |
width: calc((100% - var(--size)) * var(--progress) - var(--gap)); | |
} | |
.track-after { | |
--stop: calc( (1 - var(--fill-start)) * ((100% + var(--gap)) / (1 - var(--progress))) + var(--size) / 2 ); | |
right: 0; | |
width: calc((100% - var(--size)) * (1 - var(--progress)) - var(--gap)); | |
background-image: linear-gradient(270deg, transparent var(--stop), #777 var(--stop)); | |
} | |
#inputs > label { | |
display: flex; | |
flex-direction: column; | |
margin: 1.5rem 0; | |
justify-content: space-between; | |
} | |
#inputs input { | |
margin: 0; | |
width: 100%; | |
} | |
* { | |
box-sizing: border-box; | |
} | |
body { | |
font: 1em/1.5 sans-serif; | |
margin: 20px; | |
max-width: 400px; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div class=slider> | |
<div class=track-before></div> | |
<div class=handle></div> | |
<div class=track-after></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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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) | |
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{"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