dzeio/components
1
0
Fork 0
mirror of https://github.com/dzeiocom/components.git synced 2025-04-24 03:42:11 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: Customize range slider

Browse Source 
Signed-off-by: Avior <github@avior.me>
This commit is contained in:
Florian Bouillon 2022-10-23 18:11:37 +02:00
parent cdedcddf4e
commit 5601a40f1d
Signed by: Florian Bouillon
GPG Key ID: BEEAF3722D0EBF64
1 changed files with 49 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
src/Input/Input.module.styl
View File

@ -160,6 +160,55 @@
~ .autocomplete:hover ~ svg.rotate ~ .autocomplete:hover ~ svg.rotate
transform rotateX(180deg) transform rotateX(180deg)
input[type="range"]
appearance none
background transparent
cursor pointer
width 100%
border none
$height = 4px
&::-webkit-slider-runnable-track
appearance none
background-color nativeRGB(var(--theme-100))
height $height
width 100%
border-radius $height
transition $transition
@media (prefers-color-scheme dark)
background-color nativeRGB(var(--gray-800))
&:active::-webkit-slider-runnable-track
background nativeRGB(var(--theme-200))
@media (prefers-color-scheme dark)
background-color nativeRGB(var(--gray-700))
&::-moz-range-track
appearance none
background-color nativeRGB(var(--theme-100))
height $height
width 100%
border-radius $height
transition $transition
@media (prefers-color-scheme dark)
background-color nativeRGB(var(--gray-800))
&::-webkit-slider-thumb
appearance none
$size = 16px
margin-top ($height / 2) - ($size / 2)
height $size
width $size
border none
background-color nativeRGB(var(--theme-500))
border-radius $size
&::-moz-range-thumb
appearance none
$size = 16px
margin-top ($height / 2) - ($size / 2)
height $size
width $size
border none
background-color nativeRGB(var(--theme-500))
border-radius $size
p p
padding 0 8px padding 0 8px
font-size rem(14) font-size rem(14)