mirror of
https://github.com/ArthurDanjou/ui.git
synced 2026-01-14 12:14:41 +01:00
feat(Slider): new component (#57)
Co-authored-by: Benjamin Canac <canacb1@gmail.com>
This commit is contained in:
Romain Hamel
GitHub
@@ -33,6 +33,7 @@ const components = [
|
||||
'separator',
|
||||
'skeleton',
|
||||
'slideover',
|
||||
'slider',
|
||||
'switch',
|
||||
'tabs',
|
||||
'textarea',
|
||||
|
||||
@@ -22,8 +22,8 @@ const schema = z.object({
|
||||
}),
|
||||
radioGroup: z.string().refine(value => value === 'option-2', {
|
||||
message: 'Select Option 2'
|
||||
})
|
||||
// range: z.number().max(20, { message: 'Must be less than 20' })
|
||||
}),
|
||||
slider: z.number().max(20, { message: 'Must be less than 20' })
|
||||
})
|
||||
|
||||
type Schema = z.output<typeof schema>
|
||||
@@ -70,6 +70,10 @@ function onSubmit(event: FormSubmitEvent<Schema>) {
|
||||
<USwitch v-model="state.switch" />
|
||||
</UFormField>
|
||||
|
||||
<UFormField name="slider">
|
||||
<USlider v-model="state.slider" />
|
||||
</UFormField>
|
||||
|
||||
<div class="flex gap-2">
|
||||
<UButton color="gray" type="submit" :disabled="form?.disabled">
|
||||
Submit
|
||||
|
||||
35
playground/pages/slider.vue
Normal file
35
playground/pages/slider.vue
Normal file
@@ -0,0 +1,35 @@
|
||||
<script setup lang="ts">
|
||||
import theme from '#build/ui/slider'
|
||||
|
||||
const sizes = Object.keys(theme.variants.size)
|
||||
|
||||
const value = ref(50)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex flex-col gap-4 items-center">
|
||||
<div class="flex flex-col gap-4 w-48">
|
||||
<USlider v-model="value" />
|
||||
<USlider :default-value="100" />
|
||||
<USlider color="green" />
|
||||
<USlider inverted />
|
||||
<USlider disabled />
|
||||
<USlider :min="4" :max="12" :step="2" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col gap-4 w-48">
|
||||
<USlider :model-value="[0, 10]" />
|
||||
<USlider :model-value="[0, 10, 30]" />
|
||||
<USlider :model-value="[0, 30]" :min-steps-between-thumbs="20" />
|
||||
<USlider :default-value="[0, 10]" />
|
||||
</div>
|
||||
|
||||
<div class="flex items-center gap-4">
|
||||
<USlider v-for="size in sizes" :key="size" :size="(size as any)" class="w-32" />
|
||||
</div>
|
||||
|
||||
<div class="h-48">
|
||||
<USlider v-model="value" orientation="vertical" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -39,9 +39,9 @@ export interface RadioGroupSlots<T> {
|
||||
|
||||
<script setup lang="ts" generic="T extends string | undefined">
|
||||
import { computed } from 'vue'
|
||||
import { useId, useFormField } from '#imports'
|
||||
import { RadioGroupRoot, RadioGroupItem, RadioGroupIndicator, Label, useForwardPropsEmits } from 'radix-vue'
|
||||
import { reactivePick } from '@vueuse/core'
|
||||
import { useId, useFormField } from '#imports'
|
||||
|
||||
const props = defineProps<RadioGroupProps<T>>()
|
||||
const emits = defineEmits<RadioGroupEmits>()
|
||||
|
||||
91
src/runtime/components/Slider.vue
Normal file
91
src/runtime/components/Slider.vue
Normal file
@@ -0,0 +1,91 @@
|
||||
<script lang="ts">
|
||||
import { tv, type VariantProps } from 'tailwind-variants'
|
||||
import type { SliderRootProps, SliderRootEmits } from 'radix-vue'
|
||||
import type { AppConfig } from '@nuxt/schema'
|
||||
import _appConfig from '#build/app.config'
|
||||
import theme from '#build/ui/slider'
|
||||
|
||||
const appConfig = _appConfig as AppConfig & { ui: { slider: Partial<typeof theme> } }
|
||||
|
||||
const slider = tv({ extend: tv(theme), ...(appConfig.ui?.slider || {}) })
|
||||
|
||||
type SliderVariants = VariantProps<typeof slider>
|
||||
|
||||
export interface SliderProps extends Omit<SliderRootProps, 'asChild' | 'defaultValue' | 'dir'> {
|
||||
size?: SliderVariants['size']
|
||||
color?: SliderVariants['color']
|
||||
defaultValue?: number | number[]
|
||||
class?: any
|
||||
ui?: Partial<typeof slider.slots>
|
||||
}
|
||||
|
||||
export interface SliderEmits extends Omit<SliderRootEmits, 'update:modelValue'> {}
|
||||
</script>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
import { SliderRoot, SliderRange, SliderTrack, SliderThumb, useForwardPropsEmits } from 'radix-vue'
|
||||
import { reactivePick } from '@vueuse/core'
|
||||
import { useFormField } from '#imports'
|
||||
|
||||
const props = withDefaults(defineProps<SliderProps>(), {
|
||||
min: 0,
|
||||
max: 100,
|
||||
step: 1,
|
||||
orientation: 'horizontal'
|
||||
})
|
||||
const emits = defineEmits<SliderEmits>()
|
||||
|
||||
const modelValue = defineModel<number | number[]>()
|
||||
|
||||
const rootProps = useForwardPropsEmits(reactivePick(props, 'as', 'orientation', 'min', 'max', 'step', 'minStepsBetweenThumbs', 'inverted'), emits)
|
||||
|
||||
const { inputId, emitFormChange, size, color, name, disabled } = useFormField<SliderProps>(props)
|
||||
|
||||
const defaultSliderValue = computed(() => {
|
||||
if (typeof props.defaultValue === 'number') {
|
||||
return [props.defaultValue]
|
||||
}
|
||||
return props.defaultValue
|
||||
})
|
||||
|
||||
const sliderValue = computed({
|
||||
get() {
|
||||
if (typeof modelValue.value === 'number') {
|
||||
return [modelValue.value]
|
||||
}
|
||||
return modelValue.value ?? defaultSliderValue.value
|
||||
},
|
||||
set(value) {
|
||||
modelValue.value = value?.length !== 1 ? value : value[0]
|
||||
}
|
||||
})
|
||||
|
||||
const thumbsCount = computed(() => sliderValue.value?.length ?? 1)
|
||||
|
||||
const ui = computed(() => tv({ extend: slider, slots: props.ui })({
|
||||
disabled: disabled.value,
|
||||
size: size.value,
|
||||
color: color.value,
|
||||
orientation: props.orientation
|
||||
}))
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<SliderRoot
|
||||
v-bind="rootProps"
|
||||
:id="inputId"
|
||||
v-model="sliderValue"
|
||||
:name="name"
|
||||
:disabled="disabled"
|
||||
:class="ui.root({ class: props.class })"
|
||||
:default-value="defaultSliderValue"
|
||||
@update:model-value="emitFormChange()"
|
||||
>
|
||||
<SliderTrack :class="ui.track()">
|
||||
<SliderRange :class="ui.range()" />
|
||||
</SliderTrack>
|
||||
|
||||
<SliderThumb v-for="count in thumbsCount" :key="count" :class="ui.thumb()" />
|
||||
</SliderRoot>
|
||||
</template>
|
||||
1
src/runtime/types/index.d.ts
vendored
1
src/runtime/types/index.d.ts
vendored
@@ -24,6 +24,7 @@ export * from '../components/RadioGroup.vue'
|
||||
export * from '../components/Separator.vue'
|
||||
export * from '../components/Skeleton.vue'
|
||||
export * from '../components/Slideover.vue'
|
||||
export * from '../components/Slider.vue'
|
||||
export * from '../components/Switch.vue'
|
||||
export * from '../components/Tabs.vue'
|
||||
export * from '../components/Textarea.vue'
|
||||
|
||||
@@ -22,6 +22,7 @@ export { default as radioGroup } from './radio-group'
|
||||
export { default as separator } from './separator'
|
||||
export { default as skeleton } from './skeleton'
|
||||
export { default as slideover } from './slideover'
|
||||
export { default as slider } from './slider'
|
||||
export { default as switch } from './switch'
|
||||
export { default as tabs } from './tabs'
|
||||
export { default as textarea } from './textarea'
|
||||
|
||||
138
src/theme/slider.ts
Normal file
138
src/theme/slider.ts
Normal file
@@ -0,0 +1,138 @@
|
||||
export default (config: { colors: string[] }) => ({
|
||||
slots: {
|
||||
root: 'relative flex items-center select-none touch-none',
|
||||
track: 'relative bg-gray-200 dark:bg-gray-700 overflow-hidden rounded-full grow',
|
||||
range: 'absolute rounded-full',
|
||||
thumb: 'rounded-full bg-white dark:bg-gray-900 ring-2 focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2'
|
||||
},
|
||||
variants: {
|
||||
color: Object.fromEntries(config.colors.map((color: string) => [color, {
|
||||
range: `bg-${color}-500 dark:bg-${color}-400`,
|
||||
thumb: `ring-${color}-500 dark:ring-${color}-400 focus-visible:outline-${color}-500/50 dark:focus-visible:outline-${color}-400/50`
|
||||
}])),
|
||||
size: {
|
||||
'2xs': {
|
||||
thumb: 'size-1.5'
|
||||
},
|
||||
'xs': {
|
||||
thumb: 'size-2'
|
||||
},
|
||||
'sm': {
|
||||
thumb: 'size-3'
|
||||
},
|
||||
'md': {
|
||||
thumb: 'size-4'
|
||||
},
|
||||
'lg': {
|
||||
thumb: 'size-5'
|
||||
},
|
||||
'xl': {
|
||||
thumb: 'size-6'
|
||||
}
|
||||
},
|
||||
orientation: {
|
||||
horizontal: {
|
||||
root: 'w-full',
|
||||
range: 'h-full'
|
||||
},
|
||||
vertical: {
|
||||
root: 'flex-col h-full',
|
||||
range: 'w-full'
|
||||
}
|
||||
},
|
||||
disabled: {
|
||||
true: {
|
||||
root: 'opacity-75 cursor-not-allowed'
|
||||
}
|
||||
}
|
||||
},
|
||||
compoundVariants: [{
|
||||
orientation: 'horizontal',
|
||||
size: '2xs',
|
||||
class: {
|
||||
root: 'h-1.5',
|
||||
track: 'h-px'
|
||||
}
|
||||
}, {
|
||||
orientation: 'horizontal',
|
||||
size: 'xs',
|
||||
class: {
|
||||
root: 'h-2',
|
||||
track: 'h-0.5'
|
||||
}
|
||||
}, {
|
||||
orientation: 'horizontal',
|
||||
size: 'sm',
|
||||
class: {
|
||||
root: 'h-3',
|
||||
track: 'h-1'
|
||||
}
|
||||
}, {
|
||||
orientation: 'horizontal',
|
||||
size: 'md',
|
||||
class: {
|
||||
root: 'h-4',
|
||||
track: 'h-2'
|
||||
}
|
||||
}, {
|
||||
orientation: 'horizontal',
|
||||
size: 'lg',
|
||||
class: {
|
||||
root: 'h-5',
|
||||
track: 'h-3'
|
||||
}
|
||||
}, {
|
||||
orientation: 'horizontal',
|
||||
size: 'xl',
|
||||
class: {
|
||||
root: 'h-6',
|
||||
track: 'h-4'
|
||||
}
|
||||
}, {
|
||||
orientation: 'vertical',
|
||||
size: '2xs',
|
||||
class: {
|
||||
root: 'w-1.5',
|
||||
track: 'w-px'
|
||||
}
|
||||
}, {
|
||||
orientation: 'vertical',
|
||||
size: 'xs',
|
||||
class: {
|
||||
root: 'w-2',
|
||||
track: 'w-0.5'
|
||||
}
|
||||
}, {
|
||||
orientation: 'vertical',
|
||||
size: 'sm',
|
||||
class: {
|
||||
root: 'w-3',
|
||||
track: 'w-1'
|
||||
}
|
||||
}, {
|
||||
orientation: 'vertical',
|
||||
size: 'md',
|
||||
class: {
|
||||
root: 'w-4',
|
||||
track: 'w-2'
|
||||
}
|
||||
}, {
|
||||
orientation: 'vertical',
|
||||
size: 'lg',
|
||||
class: {
|
||||
root: 'w-5',
|
||||
track: 'w-3'
|
||||
}
|
||||
}, {
|
||||
orientation: 'vertical',
|
||||
size: 'xl',
|
||||
class: {
|
||||
root: 'w-6',
|
||||
track: 'w-4'
|
||||
}
|
||||
}],
|
||||
defaultVariants: {
|
||||
size: 'sm',
|
||||
color: 'primary'
|
||||
}
|
||||
})
|
||||
29
test/components/Slider.spec.ts
Normal file
29
test/components/Slider.spec.ts
Normal file
@@ -0,0 +1,29 @@
|
||||
import { describe, it, expect } from 'vitest'
|
||||
import Slider, { type SliderProps } from '../../src/runtime/components/Slider.vue'
|
||||
import ComponentRender from '../component-render'
|
||||
|
||||
describe('Slider', () => {
|
||||
it.each([
|
||||
['basic case', {}],
|
||||
['with class', { props: { class: 'w-48' } }],
|
||||
['with ui', { props: { ui: { track: 'bg-gray-100 dark:bg-gray-800' } } }],
|
||||
['with defaultValue', { props: { defaultValue: 10 } }],
|
||||
['with multiple thumbs', { props: { defaultValue: [0, 10] } }],
|
||||
['with name', { props: { name: 'custom-name' } }],
|
||||
['with disabled', { props: { disabled: true } }],
|
||||
['with inverted', { props: { inverted: true } }],
|
||||
['with orientation', { props: { orientation: 'vertical' as const } }],
|
||||
['with min max step', { props: { min: 4, max: 12, step: 2 } }],
|
||||
['with min steps between thumbs', { props: { defaultValue: [0, 30], minStepsBetweenThumbs: 30 } }],
|
||||
['with color', { props: { color: 'red' as const } }],
|
||||
['with size 2xs', { props: { size: '2xs' as const } }],
|
||||
['with size xs', { props: { size: 'xs' as const } }],
|
||||
['with size sm', { props: { size: 'sm' as const } }],
|
||||
['with size md', { props: { size: 'md' as const } }],
|
||||
['with size lg', { props: { size: 'lg' as const } }],
|
||||
['with size xl', { props: { size: 'xl' as const } }]
|
||||
])('renders %s correctly', async (nameOrHtml: string, options: { props?: SliderProps, slots?: any }) => {
|
||||
const html = await ComponentRender(nameOrHtml, options, Slider)
|
||||
expect(html).toMatchSnapshot()
|
||||
})
|
||||
})
|
||||
111
test/components/__snapshots__/Slider.spec.ts.snap
Normal file
111
test/components/__snapshots__/Slider.spec.ts.snap
Normal file
@@ -0,0 +1,111 @@
|
||||
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
|
||||
|
||||
exports[`Slider > renders basic case correctly 1`] = `
|
||||
"<span data-slider-impl="" dir="ltr" data-orientation="horizontal" style="--radix-slider-thumb-transform: translateX(-50%);" class="relative flex items-center select-none touch-none w-full h-3" aria-disabled="false"><span data-orientation="horizontal" class="relative bg-gray-200 dark:bg-gray-700 overflow-hidden rounded-full grow h-1"><span data-orientation="horizontal" style="left: 0%; right: 100%;" class="absolute rounded-full bg-primary-500 dark:bg-primary-400 h-full"></span></span>
|
||||
<div class="rounded-full bg-white dark:bg-gray-900 ring-2 focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 ring-primary-500 dark:ring-primary-400 focus-visible:outline-primary-500/50 dark:focus-visible:outline-primary-400/50 size-3" role="slider" data-radix-vue-collection-item="" tabindex="0" data-orientation="horizontal" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal" style="transform: var(--radix-slider-thumb-transform); position: absolute; left: calc(0% + 0px);" aria-valuenow="0"></div></span>
|
||||
<!---->"
|
||||
`;
|
||||
|
||||
exports[`Slider > renders with class correctly 1`] = `
|
||||
"<span data-slider-impl="" dir="ltr" data-orientation="horizontal" style="--radix-slider-thumb-transform: translateX(-50%);" class="relative flex items-center select-none touch-none h-3 w-48" aria-disabled="false"><span data-orientation="horizontal" class="relative bg-gray-200 dark:bg-gray-700 overflow-hidden rounded-full grow h-1"><span data-orientation="horizontal" style="left: 0%; right: 100%;" class="absolute rounded-full bg-primary-500 dark:bg-primary-400 h-full"></span></span>
|
||||
<div class="rounded-full bg-white dark:bg-gray-900 ring-2 focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 ring-primary-500 dark:ring-primary-400 focus-visible:outline-primary-500/50 dark:focus-visible:outline-primary-400/50 size-3" role="slider" data-radix-vue-collection-item="" tabindex="0" data-orientation="horizontal" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal" style="transform: var(--radix-slider-thumb-transform); position: absolute; left: calc(0% + 0px);" aria-valuenow="0"></div></span>
|
||||
<!---->"
|
||||
`;
|
||||
|
||||
exports[`Slider > renders with color correctly 1`] = `
|
||||
"<span data-slider-impl="" dir="ltr" data-orientation="horizontal" style="--radix-slider-thumb-transform: translateX(-50%);" class="relative flex items-center select-none touch-none w-full h-3" aria-disabled="false"><span data-orientation="horizontal" class="relative bg-gray-200 dark:bg-gray-700 overflow-hidden rounded-full grow h-1"><span data-orientation="horizontal" style="left: 0%; right: 100%;" class="absolute rounded-full bg-red-500 dark:bg-red-400 h-full"></span></span>
|
||||
<div class="rounded-full bg-white dark:bg-gray-900 ring-2 focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 ring-red-500 dark:ring-red-400 focus-visible:outline-red-500/50 dark:focus-visible:outline-red-400/50 size-3" role="slider" data-radix-vue-collection-item="" tabindex="0" data-orientation="horizontal" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal" style="transform: var(--radix-slider-thumb-transform); position: absolute; left: calc(0% + 0px);" aria-valuenow="0"></div></span>
|
||||
<!---->"
|
||||
`;
|
||||
|
||||
exports[`Slider > renders with defaultValue correctly 1`] = `
|
||||
"<span data-slider-impl="" dir="ltr" data-orientation="horizontal" style="--radix-slider-thumb-transform: translateX(-50%);" class="relative flex items-center select-none touch-none w-full h-3" aria-disabled="false"><span data-orientation="horizontal" class="relative bg-gray-200 dark:bg-gray-700 overflow-hidden rounded-full grow h-1"><span data-orientation="horizontal" style="left: 0%; right: 90%;" class="absolute rounded-full bg-primary-500 dark:bg-primary-400 h-full"></span></span>
|
||||
<div class="rounded-full bg-white dark:bg-gray-900 ring-2 focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 ring-primary-500 dark:ring-primary-400 focus-visible:outline-primary-500/50 dark:focus-visible:outline-primary-400/50 size-3" role="slider" data-radix-vue-collection-item="" tabindex="0" data-orientation="horizontal" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal" style="transform: var(--radix-slider-thumb-transform); position: absolute; left: calc(10% + 0px);" aria-valuenow="10"></div></span>
|
||||
<!---->"
|
||||
`;
|
||||
|
||||
exports[`Slider > renders with disabled correctly 1`] = `
|
||||
"<span data-slider-impl="" dir="ltr" data-orientation="horizontal" style="--radix-slider-thumb-transform: translateX(-50%);" class="relative flex items-center select-none touch-none w-full opacity-75 cursor-not-allowed h-3" aria-disabled="true" data-disabled=""><span data-disabled="" data-orientation="horizontal" class="relative bg-gray-200 dark:bg-gray-700 overflow-hidden rounded-full grow h-1"><span data-disabled="" data-orientation="horizontal" style="left: 0%; right: 100%;" class="absolute rounded-full bg-primary-500 dark:bg-primary-400 h-full"></span></span>
|
||||
<div class="rounded-full bg-white dark:bg-gray-900 ring-2 focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 ring-primary-500 dark:ring-primary-400 focus-visible:outline-primary-500/50 dark:focus-visible:outline-primary-400/50 size-3" role="slider" data-radix-vue-collection-item="" data-disabled="" data-orientation="horizontal" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal" style="transform: var(--radix-slider-thumb-transform); position: absolute; left: calc(0% + 0px);" aria-valuenow="0"></div></span>
|
||||
<!---->"
|
||||
`;
|
||||
|
||||
exports[`Slider > renders with inverted correctly 1`] = `
|
||||
"<span data-slider-impl="" dir="ltr" data-orientation="horizontal" style="--radix-slider-thumb-transform: translateX(-50%);" class="relative flex items-center select-none touch-none w-full h-3" aria-disabled="false"><span data-orientation="horizontal" class="relative bg-gray-200 dark:bg-gray-700 overflow-hidden rounded-full grow h-1"><span data-orientation="horizontal" style="right: 0%; left: 100%;" class="absolute rounded-full bg-primary-500 dark:bg-primary-400 h-full"></span></span>
|
||||
<div class="rounded-full bg-white dark:bg-gray-900 ring-2 focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 ring-primary-500 dark:ring-primary-400 focus-visible:outline-primary-500/50 dark:focus-visible:outline-primary-400/50 size-3" role="slider" data-radix-vue-collection-item="" tabindex="0" data-orientation="horizontal" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal" style="transform: var(--radix-slider-thumb-transform); position: absolute; right: calc(0% + 0px);" aria-valuenow="0"></div></span>
|
||||
<!---->"
|
||||
`;
|
||||
|
||||
exports[`Slider > renders with min max step correctly 1`] = `
|
||||
"<span data-slider-impl="" dir="ltr" data-orientation="horizontal" style="--radix-slider-thumb-transform: translateX(-50%);" class="relative flex items-center select-none touch-none w-full h-3" aria-disabled="false"><span data-orientation="horizontal" class="relative bg-gray-200 dark:bg-gray-700 overflow-hidden rounded-full grow h-1"><span data-orientation="horizontal" style="left: 0%; right: 100%;" class="absolute rounded-full bg-primary-500 dark:bg-primary-400 h-full"></span></span>
|
||||
<div class="rounded-full bg-white dark:bg-gray-900 ring-2 focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 ring-primary-500 dark:ring-primary-400 focus-visible:outline-primary-500/50 dark:focus-visible:outline-primary-400/50 size-3" role="slider" data-radix-vue-collection-item="" tabindex="0" data-orientation="horizontal" aria-valuemin="4" aria-valuemax="12" aria-orientation="horizontal" style="transform: var(--radix-slider-thumb-transform); position: absolute; left: calc(0% + 0px);" aria-valuenow="0"></div></span>
|
||||
<!---->"
|
||||
`;
|
||||
|
||||
exports[`Slider > renders with min steps between thumbs correctly 1`] = `
|
||||
"<span data-slider-impl="" dir="ltr" data-orientation="horizontal" style="--radix-slider-thumb-transform: translateX(-50%);" class="relative flex items-center select-none touch-none w-full h-3" aria-disabled="false"><span data-orientation="horizontal" class="relative bg-gray-200 dark:bg-gray-700 overflow-hidden rounded-full grow h-1"><span data-orientation="horizontal" style="left: 0%; right: 70%;" class="absolute rounded-full bg-primary-500 dark:bg-primary-400 h-full"></span></span>
|
||||
<div class="rounded-full bg-white dark:bg-gray-900 ring-2 focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 ring-primary-500 dark:ring-primary-400 focus-visible:outline-primary-500/50 dark:focus-visible:outline-primary-400/50 size-3" role="slider" data-radix-vue-collection-item="" tabindex="0" data-orientation="horizontal" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal" style="transform: var(--radix-slider-thumb-transform); position: absolute; left: calc(0% + 0px);" aria-label="Minimum" aria-valuenow="0"></div>
|
||||
<div class="rounded-full bg-white dark:bg-gray-900 ring-2 focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 ring-primary-500 dark:ring-primary-400 focus-visible:outline-primary-500/50 dark:focus-visible:outline-primary-400/50 size-3" role="slider" data-radix-vue-collection-item="" tabindex="0" data-orientation="horizontal" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal" style="transform: var(--radix-slider-thumb-transform); position: absolute; left: calc(30% + 0px);" aria-label="Maximum" aria-valuenow="30"></div></span>
|
||||
<!---->"
|
||||
`;
|
||||
|
||||
exports[`Slider > renders with multiple thumbs correctly 1`] = `
|
||||
"<span data-slider-impl="" dir="ltr" data-orientation="horizontal" style="--radix-slider-thumb-transform: translateX(-50%);" class="relative flex items-center select-none touch-none w-full h-3" aria-disabled="false"><span data-orientation="horizontal" class="relative bg-gray-200 dark:bg-gray-700 overflow-hidden rounded-full grow h-1"><span data-orientation="horizontal" style="left: 0%; right: 90%;" class="absolute rounded-full bg-primary-500 dark:bg-primary-400 h-full"></span></span>
|
||||
<div class="rounded-full bg-white dark:bg-gray-900 ring-2 focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 ring-primary-500 dark:ring-primary-400 focus-visible:outline-primary-500/50 dark:focus-visible:outline-primary-400/50 size-3" role="slider" data-radix-vue-collection-item="" tabindex="0" data-orientation="horizontal" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal" style="transform: var(--radix-slider-thumb-transform); position: absolute; left: calc(0% + 0px);" aria-label="Minimum" aria-valuenow="0"></div>
|
||||
<div class="rounded-full bg-white dark:bg-gray-900 ring-2 focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 ring-primary-500 dark:ring-primary-400 focus-visible:outline-primary-500/50 dark:focus-visible:outline-primary-400/50 size-3" role="slider" data-radix-vue-collection-item="" tabindex="0" data-orientation="horizontal" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal" style="transform: var(--radix-slider-thumb-transform); position: absolute; left: calc(10% + 0px);" aria-label="Maximum" aria-valuenow="10"></div></span>
|
||||
<!---->"
|
||||
`;
|
||||
|
||||
exports[`Slider > renders with name correctly 1`] = `
|
||||
"<span data-slider-impl="" dir="ltr" data-orientation="horizontal" style="--radix-slider-thumb-transform: translateX(-50%);" class="relative flex items-center select-none touch-none w-full h-3" aria-disabled="false"><span data-orientation="horizontal" class="relative bg-gray-200 dark:bg-gray-700 overflow-hidden rounded-full grow h-1"><span data-orientation="horizontal" style="left: 0%; right: 100%;" class="absolute rounded-full bg-primary-500 dark:bg-primary-400 h-full"></span></span>
|
||||
<div class="rounded-full bg-white dark:bg-gray-900 ring-2 focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 ring-primary-500 dark:ring-primary-400 focus-visible:outline-primary-500/50 dark:focus-visible:outline-primary-400/50 size-3" role="slider" data-radix-vue-collection-item="" tabindex="0" data-orientation="horizontal" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal" style="transform: var(--radix-slider-thumb-transform); position: absolute; left: calc(0% + 0px);" aria-valuenow="0"></div></span>
|
||||
<!---->"
|
||||
`;
|
||||
|
||||
exports[`Slider > renders with orientation correctly 1`] = `
|
||||
"<span data-slider-impl="" data-orientation="vertical" style="--radix-slider-thumb-transform: translateY(50%);" class="relative flex items-center select-none touch-none flex-col h-full w-3" dir="ltr" aria-disabled="false"><span data-orientation="vertical" class="relative bg-gray-200 dark:bg-gray-700 overflow-hidden rounded-full grow w-1"><span data-orientation="vertical" style="bottom: 0%; top: 100%;" class="absolute rounded-full bg-primary-500 dark:bg-primary-400 w-full"></span></span>
|
||||
<div class="rounded-full bg-white dark:bg-gray-900 ring-2 focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 ring-primary-500 dark:ring-primary-400 focus-visible:outline-primary-500/50 dark:focus-visible:outline-primary-400/50 size-3" role="slider" data-radix-vue-collection-item="" tabindex="0" data-orientation="vertical" aria-valuemin="0" aria-valuemax="100" aria-orientation="vertical" style="transform: var(--radix-slider-thumb-transform); position: absolute; bottom: calc(0% + 0px);" aria-valuenow="0"></div></span>
|
||||
<!---->"
|
||||
`;
|
||||
|
||||
exports[`Slider > renders with size 2xs correctly 1`] = `
|
||||
"<span data-slider-impl="" dir="ltr" data-orientation="horizontal" style="--radix-slider-thumb-transform: translateX(-50%);" class="relative flex items-center select-none touch-none w-full h-1.5" aria-disabled="false"><span data-orientation="horizontal" class="relative bg-gray-200 dark:bg-gray-700 overflow-hidden rounded-full grow h-px"><span data-orientation="horizontal" style="left: 0%; right: 100%;" class="absolute rounded-full bg-primary-500 dark:bg-primary-400 h-full"></span></span>
|
||||
<div class="rounded-full bg-white dark:bg-gray-900 ring-2 focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 ring-primary-500 dark:ring-primary-400 focus-visible:outline-primary-500/50 dark:focus-visible:outline-primary-400/50 size-1.5" role="slider" data-radix-vue-collection-item="" tabindex="0" data-orientation="horizontal" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal" style="transform: var(--radix-slider-thumb-transform); position: absolute; left: calc(0% + 0px);" aria-valuenow="0"></div></span>
|
||||
<!---->"
|
||||
`;
|
||||
|
||||
exports[`Slider > renders with size lg correctly 1`] = `
|
||||
"<span data-slider-impl="" dir="ltr" data-orientation="horizontal" style="--radix-slider-thumb-transform: translateX(-50%);" class="relative flex items-center select-none touch-none w-full h-5" aria-disabled="false"><span data-orientation="horizontal" class="relative bg-gray-200 dark:bg-gray-700 overflow-hidden rounded-full grow h-3"><span data-orientation="horizontal" style="left: 0%; right: 100%;" class="absolute rounded-full bg-primary-500 dark:bg-primary-400 h-full"></span></span>
|
||||
<div class="rounded-full bg-white dark:bg-gray-900 ring-2 focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 ring-primary-500 dark:ring-primary-400 focus-visible:outline-primary-500/50 dark:focus-visible:outline-primary-400/50 size-5" role="slider" data-radix-vue-collection-item="" tabindex="0" data-orientation="horizontal" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal" style="transform: var(--radix-slider-thumb-transform); position: absolute; left: calc(0% + 0px);" aria-valuenow="0"></div></span>
|
||||
<!---->"
|
||||
`;
|
||||
|
||||
exports[`Slider > renders with size md correctly 1`] = `
|
||||
"<span data-slider-impl="" dir="ltr" data-orientation="horizontal" style="--radix-slider-thumb-transform: translateX(-50%);" class="relative flex items-center select-none touch-none w-full h-4" aria-disabled="false"><span data-orientation="horizontal" class="relative bg-gray-200 dark:bg-gray-700 overflow-hidden rounded-full grow h-2"><span data-orientation="horizontal" style="left: 0%; right: 100%;" class="absolute rounded-full bg-primary-500 dark:bg-primary-400 h-full"></span></span>
|
||||
<div class="rounded-full bg-white dark:bg-gray-900 ring-2 focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 ring-primary-500 dark:ring-primary-400 focus-visible:outline-primary-500/50 dark:focus-visible:outline-primary-400/50 size-4" role="slider" data-radix-vue-collection-item="" tabindex="0" data-orientation="horizontal" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal" style="transform: var(--radix-slider-thumb-transform); position: absolute; left: calc(0% + 0px);" aria-valuenow="0"></div></span>
|
||||
<!---->"
|
||||
`;
|
||||
|
||||
exports[`Slider > renders with size sm correctly 1`] = `
|
||||
"<span data-slider-impl="" dir="ltr" data-orientation="horizontal" style="--radix-slider-thumb-transform: translateX(-50%);" class="relative flex items-center select-none touch-none w-full h-3" aria-disabled="false"><span data-orientation="horizontal" class="relative bg-gray-200 dark:bg-gray-700 overflow-hidden rounded-full grow h-1"><span data-orientation="horizontal" style="left: 0%; right: 100%;" class="absolute rounded-full bg-primary-500 dark:bg-primary-400 h-full"></span></span>
|
||||
<div class="rounded-full bg-white dark:bg-gray-900 ring-2 focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 ring-primary-500 dark:ring-primary-400 focus-visible:outline-primary-500/50 dark:focus-visible:outline-primary-400/50 size-3" role="slider" data-radix-vue-collection-item="" tabindex="0" data-orientation="horizontal" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal" style="transform: var(--radix-slider-thumb-transform); position: absolute; left: calc(0% + 0px);" aria-valuenow="0"></div></span>
|
||||
<!---->"
|
||||
`;
|
||||
|
||||
exports[`Slider > renders with size xl correctly 1`] = `
|
||||
"<span data-slider-impl="" dir="ltr" data-orientation="horizontal" style="--radix-slider-thumb-transform: translateX(-50%);" class="relative flex items-center select-none touch-none w-full h-6" aria-disabled="false"><span data-orientation="horizontal" class="relative bg-gray-200 dark:bg-gray-700 overflow-hidden rounded-full grow h-4"><span data-orientation="horizontal" style="left: 0%; right: 100%;" class="absolute rounded-full bg-primary-500 dark:bg-primary-400 h-full"></span></span>
|
||||
<div class="rounded-full bg-white dark:bg-gray-900 ring-2 focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 ring-primary-500 dark:ring-primary-400 focus-visible:outline-primary-500/50 dark:focus-visible:outline-primary-400/50 size-6" role="slider" data-radix-vue-collection-item="" tabindex="0" data-orientation="horizontal" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal" style="transform: var(--radix-slider-thumb-transform); position: absolute; left: calc(0% + 0px);" aria-valuenow="0"></div></span>
|
||||
<!---->"
|
||||
`;
|
||||
|
||||
exports[`Slider > renders with size xs correctly 1`] = `
|
||||
"<span data-slider-impl="" dir="ltr" data-orientation="horizontal" style="--radix-slider-thumb-transform: translateX(-50%);" class="relative flex items-center select-none touch-none w-full h-2" aria-disabled="false"><span data-orientation="horizontal" class="relative bg-gray-200 dark:bg-gray-700 overflow-hidden rounded-full grow h-0.5"><span data-orientation="horizontal" style="left: 0%; right: 100%;" class="absolute rounded-full bg-primary-500 dark:bg-primary-400 h-full"></span></span>
|
||||
<div class="rounded-full bg-white dark:bg-gray-900 ring-2 focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 ring-primary-500 dark:ring-primary-400 focus-visible:outline-primary-500/50 dark:focus-visible:outline-primary-400/50 size-2" role="slider" data-radix-vue-collection-item="" tabindex="0" data-orientation="horizontal" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal" style="transform: var(--radix-slider-thumb-transform); position: absolute; left: calc(0% + 0px);" aria-valuenow="0"></div></span>
|
||||
<!---->"
|
||||
`;
|
||||
|
||||
exports[`Slider > renders with ui correctly 1`] = `
|
||||
"<span data-slider-impl="" dir="ltr" data-orientation="horizontal" style="--radix-slider-thumb-transform: translateX(-50%);" class="relative flex items-center select-none touch-none w-full h-3" aria-disabled="false"><span data-orientation="horizontal" class="relative overflow-hidden rounded-full grow bg-gray-100 dark:bg-gray-800 h-1"><span data-orientation="horizontal" style="left: 0%; right: 100%;" class="absolute rounded-full bg-primary-500 dark:bg-primary-400 h-full"></span></span>
|
||||
<div class="rounded-full bg-white dark:bg-gray-900 ring-2 focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 ring-primary-500 dark:ring-primary-400 focus-visible:outline-primary-500/50 dark:focus-visible:outline-primary-400/50 size-3" role="slider" data-radix-vue-collection-item="" tabindex="0" data-orientation="horizontal" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal" style="transform: var(--radix-slider-thumb-transform); position: absolute; left: calc(0% + 0px);" aria-valuenow="0"></div></span>
|
||||
<!---->"
|
||||
`;
|
||||
Reference in New Issue
Block a user