diff options
| author | Adam Soltys <[email protected]> | 2023-12-01 20:04:13 -0800 |
|---|---|---|
| committer | Adam Soltys <[email protected]> | 2023-12-01 20:04:13 -0800 |
| commit | 216a600224fde22ce76b367557a02094ec693886 (patch) | |
| tree | d1189bbaa39db204633523132a7d4767b952717d /src/components/Slider.svelte | |
| parent | 7d9bc1f54dfd04172e8d6d43ebc2efd6f407e833 (diff) | |
| download | coinos-ui-216a600224fde22ce76b367557a02094ec693886.tar.gz coinos-ui-216a600224fde22ce76b367557a02094ec693886.zip | |
prettier
Diffstat (limited to 'src/components/Slider.svelte')
| -rw-r--r-- | src/components/Slider.svelte | 90 |
1 files changed, 45 insertions, 45 deletions
diff --git a/src/components/Slider.svelte b/src/components/Slider.svelte index 3c94d127..b82b6bf9 100644 --- a/src/components/Slider.svelte +++ b/src/components/Slider.svelte @@ -1,56 +1,56 @@ <script> - export let value, - handle, - min = 0, - max = 100; + export let value, + handle, + min = 0, + max = 100; </script> <input - id="slider" - type="range" - {min} - {max} - bind:value - class="px-0 py-0 my-5" - style="--bgPercent: {((value - min) * 100) / (max - min)}%;" - on:input={handle} + id="slider" + type="range" + {min} + {max} + bind:value + class="px-0 py-0 my-5" + style="--bgPercent: {((value - min) * 100) / (max - min)}%;" + on:input={handle} /> <style> - #slider { - -webkit-appearance: none; - width: 100%; - height: 6px; - border-radius: 5px; - background: linear-gradient( - to right, - black 0%, - black var(--bgPercent), - #f5f7fa var(--bgPercent), - #f5f7fa 100% - ); - outline: none; - } + #slider { + -webkit-appearance: none; + width: 100%; + height: 6px; + border-radius: 5px; + background: linear-gradient( + to right, + black 0%, + black var(--bgPercent), + #f5f7fa var(--bgPercent), + #f5f7fa 100% + ); + outline: none; + } - #slider:active { - background-color: black; - } + #slider:active { + background-color: black; + } - #slider::-webkit-slider-thumb { - -webkit-appearance: none; - appearance: none; - width: 30px; - height: 30px; - border-radius: 50%; - background: black; - cursor: pointer; - } + #slider::-webkit-slider-thumb { + -webkit-appearance: none; + appearance: none; + width: 30px; + height: 30px; + border-radius: 50%; + background: black; + cursor: pointer; + } - #slider::-moz-range-thumb { - width: 30px; - height: 30px; - border-radius: 50%; - background: black; - cursor: pointer; - } + #slider::-moz-range-thumb { + width: 30px; + height: 30px; + border-radius: 50%; + background: black; + cursor: pointer; + } </style> |
