---
title: RangeSlider
category: Forms
summary: Allow the user to specify a numeric value which must be no less than a minimum value and no more than a maximum value. Composes [Box](/box).
---

```jsx live
render(() => {
  const [volume, setVolume] = React.useState(50)
  const muted = volume === 0
  return (
    <StackView axis="horizontal" alignment="center" width="25%" spacing={1}>
      <Icon>
        <Icon.Path name="volume-0" />
        <Icon.Path name="volume-1" visible={muted} />
        <Icon.Path name="volume-2" visible={!muted} />
        <Icon.Path name="volume-3" visible={!muted && volume > 50} />
      </Icon>
      <RangeSlider value={volume} onChange={setVolume} />
      <Text>{volume}</Text>
    </StackView>
  )
})
```

```jsx live
render(() => {
  const [value, setValue] = React.useState(20)
  return (
    <RangeSlider
      step={10}
      value={value}
      onChange={setValue}
      width="50%"
      paddingVertical={1}
      variant={{
        track: {
          height: 1,
          backgroundColor: 'hsl(330, 100%, 92%)',
          radius: undefined,
        },
        progress: {
          backgroundColor: 'hsl(330, 100%, 72%)',
        },
        thumb: {
          width: 1,
          height: 3,
          radius: undefined,
        },
      }}
    />
  )
})
```