# useSlider

Hook for connecting slider input behavior to custom React elements

`useSlider` is the low-level hook behind the [Slider](https://videojs.org/docs/framework/react/reference/components/slider), [TimeSlider](https://videojs.org/docs/framework/react/reference/components/time-slider), and [VolumeSlider](https://videojs.org/docs/framework/react/reference/components/volume-slider) components. Use it when you need to build a new slider primitive with custom state calculations. For standard player controls, use the built-in components.

## Import

```tsx
import { useSlider } from "@videojs/react";
```

## Usage

Pass callbacks that convert raw slider input into your component state, values, and CSS variables. Attach the returned root props, ref, and styles to the pointer target. Attach the thumb props and ref to the focusable thumb.

```tsx
function CustomSlider({ options }: { options: useSlider.Options }) {
  const {
    state,
    input,
    cssVars,
    rootRef,
    thumbRef,
    rootProps,
    rootStyle,
    thumbProps,
  } = useSlider(options);

  return (
    <div
      ref={rootRef}
      {...rootProps}
      style={{ ...cssVars, ...rootStyle }}
      data-dragging={state.dragging || undefined}
    >
      <div
        ref={thumbRef}
        {...thumbProps}
        data-focused={input.current.focused || undefined}
      />
    </div>
  );
}
```

`state` is the derived state for the current render. `input` is the underlying reactive state container. Read `input.current` for the latest raw input or call `input.subscribe(listener)` when another system needs to observe changes outside React rendering.

## API Reference

`useSlider<State extends SliderState = SliderState>(options): UseSliderReturnValue<State>`

### Parameters

| Parameter | Type | Default |
| --- | --- | --- |
| `options` (required) | `{ getPercent: (() => number); getStepPercent: (() => number); getLargeStepPercent: (() => number); changeThrottle?: number; onValueChange?: ((percent: number) => void); onValueCommit?: ((percent: number) => void); onPressStart?: (() => void); onPressEnd?: (() => void); onDragStart?: (() => void); onDragEnd?: (() => void); computeState: ((input: SliderInput) => State); orientation?: 'horizontal' \| 'vertical'; disabled?: boolean; adjustPercent?: ((rawPercent: number, thumbSize: number, trackSize: number) => number); getCSSVars: ((state: State) => Record<string, string>) }` | — |

### Return Value

| Property | Type |
| --- | --- |
| `state` | `State` |
| `input` | `State<SliderInput>` |
| `cssVars` | `Record<string, string>` |
| `rootRef` | `RefCallback<HTMLElement>` |
| `thumbRef` | `RefCallback<HTMLElement>` |
| `rootProps` | `{ onPointerDown: ((event: UIPointerEvent) => void); onPointerMove: ((event: UIPointerEvent) => void); onPointerUp: ((event: UIPointerEvent) => void); onPointerLeave: ((event: UIPointerEvent) => void); onLostPointerCapture: (() => void) }` |
| `rootStyle` | `{ touchAction: string; userSelect: string }` |
| `thumbProps` | `{ onKeyDownCapture: ((event: UIKeyboardEvent) => void); onFocus: (() => void); onBlur: (() => void) }` |

---

React documentation: https://videojs.org/docs/framework/react/llms.txt
All documentation: https://videojs.org/llms.txt