aboutsummaryrefslogtreecommitdiffstats
path: root/src/components/Slider.svelte
diff options
context:
space:
mode:
authorAdam Soltys <[email protected]>2023-12-01 20:04:13 -0800
committerAdam Soltys <[email protected]>2023-12-01 20:04:13 -0800
commit216a600224fde22ce76b367557a02094ec693886 (patch)
treed1189bbaa39db204633523132a7d4767b952717d /src/components/Slider.svelte
parent7d9bc1f54dfd04172e8d6d43ebc2efd6f407e833 (diff)
downloadcoinos-ui-216a600224fde22ce76b367557a02094ec693886.tar.gz
coinos-ui-216a600224fde22ce76b367557a02094ec693886.zip
prettier
Diffstat (limited to 'src/components/Slider.svelte')
-rw-r--r--src/components/Slider.svelte90
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>