Slider

Basic responsive slider. All the usual props can be added.

Value: 5

() => {
  const [value, setValue] = useState(5)
  return (
    <>
      Value: {value}
      <Slider
        value={value}
        min={0}
        max={10}
        step={1}
        onChange={(e) => setValue(parseFloat(e.target.value))}
      />
    </>
  )
}() => {
  const [value, setValue] = useState(5)
  return (
    <>
      Value: {value}
      <Slider
        value={value}
        min={0}
        max={10}
        step={1}
        onChange={(e) => setValue(parseFloat(e.target.value))}
      />
    </>
  )
}

A color can be specified.

{
  colors.map((color, index) => <Slider sx={{ color: color, mb: [4] }} />)
}{
  colors.map((color, index) => <Slider sx={{ color: color, mb: [4] }} />)
}

X,Y: 0000,0000

c95cdce