🎚️ Simplifies vertical slider
This commit is contained in:
@@ -7,7 +7,8 @@
|
|||||||
|
|
||||||
<input
|
<input
|
||||||
type="range"
|
type="range"
|
||||||
orient="vertical"
|
style="writing-mode: vertical-lr; direction: rtl"
|
||||||
|
class="cursor-pointer"
|
||||||
min={min}
|
min={min}
|
||||||
max={max}
|
max={max}
|
||||||
step={step}
|
step={step}
|
||||||
@@ -17,25 +18,8 @@
|
|||||||
/>
|
/>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
input[type=range][orient=vertical] {
|
input[type=range]::-webkit-slider-runnable-track {
|
||||||
-webkit-appearance: slider-vertical;
|
|
||||||
width: 1rem;
|
|
||||||
height: 100%;
|
|
||||||
border-radius: var(--rounded-box, 1rem);
|
|
||||||
}
|
|
||||||
|
|
||||||
input[type=range][orient=vertical]::-webkit-slider-thumb {
|
|
||||||
-webkit-appearance: none;
|
|
||||||
border: 5px solid #000000;
|
|
||||||
height: 24px;
|
|
||||||
width: 24px;
|
|
||||||
border-radius: 50%;
|
|
||||||
background: black;
|
|
||||||
}
|
|
||||||
|
|
||||||
input[type=range][orient=vertical]::-webkit-slider-runnable-track {
|
|
||||||
cursor: pointer;
|
|
||||||
background: oklch(var(--p)/1);
|
background: oklch(var(--p)/1);
|
||||||
border-radius: var(--rounded-box, 1rem);
|
border-radius: var(--rounded-box, 1rem);
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
Reference in New Issue
Block a user