Slider

Installation

Download the React source package, install its dependencies, and import the component with its shared styles.

'use client';
import '@helios-ui/react/styles.css';
import{NativeScope,NativeSliderExample}from'@helios-ui/react';
export function Example(){return <NativeScope><NativeSliderExample/></NativeScope>}

Min and max range

RangeSlider renders two labeled thumbs. The selected interval fills between them, each bubble shows its exact value, and the thumbs cannot cross. Use minValue, maxValue, and step to define the allowed range.

'use client';
import '@helios-ui/react/styles.css';
import{BoardNativeSectionExample}from'@helios-ui/react';
export function Example(){return <BoardNativeSectionExample slug="slider" id="range"/>}

Controlled values

Use value and onChange for live controlled state. onChangeEnd fires after dragging or keyboard input finishes, which is useful for saving a value without sending an update for every movement.

'use client';
import '@helios-ui/react/styles.css';
import {useState} from 'react';
import {NativeScope,NativeSlider} from '@helios-ui/react';
export function Example(){
const[volume,setVolume]=useState(42);
return <NativeScope><div style={{width:320}}><NativeSlider label="Volume"value={volume}onChange={setVolume}/><output>{volume}%</output></div></NativeScope>;
}

Value bubbles and states

Exact-value bubbles are visible by default. Format them with formatValue, or set showTooltip=false when the value already appears elsewhere. Disabled sliders retain their values and accessible labels while preventing input.

'use client';
import '@helios-ui/react/styles.css';
import{BoardNativeSectionExample}from'@helios-ui/react';
export function Example(){return <BoardNativeSectionExample slug="slider" id="states"/>}