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>