Refs
Ways to access the underlying HTML elements in Ark UI components
React
In React, the ref prop can be used to access the rendered element. Use the useRef hook to create a reference and
pass it to the component.
import { Slider } from '@ark-ui/react/slider'
import { useRef } from 'react'
export const MySlider = () => {
const rootRef = useRef<HTMLDivElement | null>(null)
return <Slider.Root ref={rootRef}>{/* ... */}</Slider.Root>
}
Solid
In Solid, the ref prop can be used to access the rendered element.
import { Slider } from '@ark-ui/solid/slider'
export const MySlider = () => {
let rootRef!: HTMLDivElement
return <Slider.Root ref={(el) => (rootRef = el)}>{/* ... */}</Slider.Root>
}
Alternatively, you can assign refs to Solid.js signals via the createSignal function.
import { Slider } from '@ark-ui/solid/slider'
import { createSignal } from 'solid-js'
export const MySlider = () => {
const [rootRef, setRootRef] = createSignal<HTMLDivElement | null>(null)
return <Slider.Root ref={setRootRef}>{/* ... */}</Slider.Root>
}
Vue
In Vue, pass the ref prop to the component to access the rendered element via the $el property.
<script setup lang="ts">
import { Slider } from '@ark-ui/vue/slider'
const rootRef = ref<{ $el: HTMLDivElement } | null>(null)
</script>
<template>
<Slider.Root ref="rootRef">{/* ... */}</Slider.Root>
</template>
Svelte
In Svelte 5, use the bind:ref directive to access the rendered element.
<script lang="ts">
import { Slider } from '@ark-ui/svelte/slider'
let rootRef = $state<HTMLDivElement | null>(null)
</script>
<Slider.Root bind:ref={rootRef}>{/* ... */}</Slider.Root>