41 lines
1.5 KiB
Vue
41 lines
1.5 KiB
Vue
<template lang="pug">
|
|
.flex.items-center.gap-x-4.slider-container
|
|
div(tabindex="-1" style="position: relative; touch-action: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); user-select: none; outline: 0px; padding-top: 8px; padding-bottom: 8px;" class="chakra-slider css-1t1xvy7")
|
|
div(style="position:absolute;top:50%;transform:translateY(-50%);width:100%" class="chakra-slider__track css-8v2r68")
|
|
div(class="css-11z5obk")
|
|
div(aria-valuenow="50" class="chakra-slider__filled-track css-19vmo6h" style="position: absolute; top: 50%; transform: translateY(-50%); width: 28.5714%; left: 0%;")
|
|
div.absolute.select-none.touch-none(
|
|
role="slider" tabindex="0" aria-valuemin="10" aria-valuemax="150" aria-valuenow="25" aria-orientation="horizontal"
|
|
style="left: calc(28.5714% - 8px);"
|
|
class="chakra-slider__thumb css-12qisgv"
|
|
)
|
|
input(type="hidden" value="50")
|
|
</template>
|
|
|
|
<style>
|
|
.css-1t1xvy7 {
|
|
display: inline-block;
|
|
position: relative;
|
|
cursor: pointer;
|
|
width: 100%;
|
|
--slider-thumb-size: var(--chakra-sizes-3-5);
|
|
--slider-track-size: var(--chakra-sizes-1);
|
|
}
|
|
.css-8v2r68 {
|
|
height: var(--slider-track-size);
|
|
overflow: hidden;
|
|
border-radius: var(--chakra-radii-sm);
|
|
background: var(--chakra-colors-gray-200);
|
|
background-color: var(--toned-out-gray);
|
|
}
|
|
.css-19vmo6h {
|
|
width: inherit;
|
|
height: inherit;
|
|
background: var(--chakra-colors-blue-500);
|
|
background-color: var(--accent-blue);
|
|
}
|
|
.css-11z5obk {
|
|
position: relative;
|
|
right: var(--chakra-space-10);
|
|
}
|
|
</style> |