Slider

<Box space={2}>
  <Slider name="percentage" label="Percentage" />
  <Slider name="percentage" label="Percentage" value={40} />
  <Slider name="percentage" label="Percentage" value={100} />
</Box>

<Box space={2}>
  <Slider
    name="percentage"
    label="Percentage"
    value={20}
    min={10}
    max={40}
    steps={10}
  />
</Box>

<Slider
  name="percentage"
  label="Percentage"
  description="Select a value"
  isValid={false}
  errorMessage="Select a value above 10%."
/>

<Box space={2}>
  <Slider name="percentage" label="Percentage" hint="some static hint" />
  <Slider
    name="price"
    label="Price"
    value={10}
    hint={(value) => value * 50 + ' kr'}
  />
</Box>

<Slider
  name="years"
  label="Years"
  value={10}
  renderValue={(value) => value + ' years'}
  valueWidth={60}
/>

function Controlled() {
  const [value, setValue] = React.useState(10)

  return <Slider name="price" value={value} onChange={setValue} />
}