From 5601a40f1d9128eb855022d6d176391d56332184 Mon Sep 17 00:00:00 2001 From: Avior Date: Sun, 23 Oct 2022 18:11:37 +0200 Subject: [PATCH] feat: Customize range slider Signed-off-by: Avior --- src/Input/Input.module.styl | 49 +++++++++++++++++++++++++++++++++++++ 1 file changed, 49 insertions(+) diff --git a/src/Input/Input.module.styl b/src/Input/Input.module.styl index b0a6219..70c9ec3 100644 --- a/src/Input/Input.module.styl +++ b/src/Input/Input.module.styl @@ -160,6 +160,55 @@ ~ .autocomplete:hover ~ svg.rotate 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 padding 0 8px font-size rem(14)