提交剩余

components/SliderUndefined.vue

@@ -0,0 +1,41 @@
+<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>