mirror of
https://github.com/ArthurDanjou/ui.git
synced 2026-01-22 16:00:39 +01:00
feat(Slider): new component (#57)
Co-authored-by: Benjamin Canac <canacb1@gmail.com>
This commit is contained in:
Romain Hamel
GitHub
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