# Slider

## Basic slider

```jsx
() => {
  const [value, setValue] = React.useState(0);

  return <SilkeSlider value={value} onChange={setValue} />;
};
```

## Range slider

```jsx
() => {
  const [value, setValue] = React.useState([0, 1]);

  return <SilkeSlider value={value} onChange={setValue} />;
};
```

### Disable order

```jsx
() => {
  const [value, setValue] = React.useState([0, 1]);

  return <SilkeSlider value={value} disableOrder onChange={setValue} />;
};
```

## Slider with multiple points

```jsx
() => {
  const [value, setValue] = React.useState([0]);

  return (
    <SilkeSlider
      value={value}
      onChange={setValue}
      onTrackClick={(e, v) => setValue([...value, v].sort())}
    />
  );
};
```

## Track styling

```jsx
() => {
  const [value, setValue] = React.useState([0, 1]);

  return (
    <SilkeSlider
      value={value}
      style={{ '--track-height': '24px', '--point-size': '24px' }}
      onChange={setValue}
    />
  );
};
```

## Gradient slider example

```jsx
() => {
  const [value, setValue] = React.useState([0, 1]);

  return (
    <SilkeSlider
      disableOrder
      value={value}
      style={{
        '--track-height': '24px',
        '--point-size': '24px',
        '--track-bg':
          ' linear-gradient(to right,#f00 0,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,#f00 100%)',
      }}
      onChange={setValue}
      onTrackClick={(e, v) => setValue([...value, v].sort())}
      onRequestRemove={(index) => {
        setValue(value.filter((v, i) => i !== index));
        return true;
      }}
    />
  );
};
```