Slider

Sizable, themed, works controlled or uncontrolled.
Multiple thumbs support.
Control steps and control with your keyboard.
Accessible, easy to compose and customize.

Installation

Slider is already installed in @hanzo/gui, or you can install it independently:

npm install @hanzogui/slider

Usage

Slider comes as multiple components that ship with default styles and are sizable. The size prop on <Slider /> will automatically pass size down to all the sub-components.

import { Slider } from '@hanzo/gui'

export default () => (
  <Slider size="$4" width={200} defaultValue={[50]} max={100} step={1}>
    <Slider.Track>
      <Slider.TrackActive />
    </Slider.Track>
    <Slider.Thumb circular index={0} />
  </Slider>
)

You can also optionally style any component, either using inline style props or by wrapping with styled:

import { Slider, styled } from '@hanzo/gui'

const CustomSliderTrack = styled(Slider.Track, {
  backgroundColor: 'red',
})

export default () => (
  <Slider size="$4" width={200} defaultValue={[50]} max={100} step={1}>
    <CustomSliderTrack>
      <Slider.TrackActive />
    </CustomSliderTrack>
    <Slider.Thumb circular index={0} />
  </Slider>
)

When using a vertical slider on iOS, you need to pass safe area insets to GuiProvider for proper pointer position calculation. Without this, the slider thumb may not track your finger correctly due to iOS safe area offsets.

import { GuiProvider } from '@hanzo/gui'
import { useSafeAreaInsets } from 'react-native-safe-area-context'
import { config } from './gui.config'

function App() {
  const insets = useSafeAreaInsets()

  return (
    <GuiProvider config={config} insets={insets}>
      {/* Your app content */}
    </GuiProvider>
  )
}

Then you can use vertical sliders normally:

import { Slider, XStack } from '@hanzo/gui'

export default () => (
  <XStack height={200} alignItems="center" gap="$8">
    <Slider height={200} orientation="vertical" defaultValue={[50]} max={100} step={1}>
      <Slider.Track>
        <Slider.TrackActive />
      </Slider.Track>
      <Slider.Thumb size="$2" index={0} circular />
    </Slider>
  </XStack>
)

This is only required on iOS. On Android and web, the slider works correctly without passing insets.

API Reference

Contains every component for the slider.

Prop	Type	Default	Required
size	SizeTokens	-	-
name	string	-	-
value	number[]	-	-
defaultValue	number[]	-	-
onValueChange	(value: number[]): void	-	-
disabled	boolean	-	-
orientation	"horizontal" \| "vertical"	horizontal	-
dir	"ltr" \| "rtl"	-	-
min	number	-	-
max	number	-	-
step	number	-	-
minStepsBetweenThumbs	number	-	-
onSlideStart	(event: GestureReponderEvent, value: number, target: 'thumb' \| 'track') => void	-	-
onSlideMove	(event: GestureReponderEvent, value: number) => void	-	-
onSlideEnd	(event: GestureReponderEvent, value: number) => void	-	-

Prop	Type	Default	Required
index	number	-	✓

Slider

Installation

Usage

Vertical Slider on iOS

API Reference

Slider

Slider.Track

Slider.TrackActive

Slider.Thumb

On this page