# Slider

```ts
import { Slider } from 'cx/widgets';
```



The `Slider` widget allows selecting numerical values by dragging the slider handle. It supports single values, ranges, stepping, mouse wheel control, and vertical orientation.

```tsx
import { createModel } from "cx/data";
import { bind, format, LabelsLeftLayout } from "cx/ui";
import { enableTooltips, Slider } from "cx/widgets";

enableTooltips();

interface Model {
  value: number;
  stepped: number;
  from: number;
  to: number;
}

const m = createModel<Model>();

export default (
  <div class="flex gap-8">
    <LabelsLeftLayout>
      <Slider
        label="Standard"
        value={bind(m.value, 50)}
        wheel
        valueTooltip={{ text: format(m.value, "n;0"), placement: "up" }}
      />
      <Slider label="Stepped" value={bind(m.stepped, 50)} step={10} wheel />
      <Slider label="Range" from={bind(m.from, 25)} to={bind(m.to, 75)} />
      <Slider label="Disabled" value={50} disabled />
    </LabelsLeftLayout>
    <Slider
      vertical
      from={bind(m.from, 25)}
      to={bind(m.to, 75)}
      rangeStyle="background: lightsteelblue"
    />
  </div>
);

```

## Configuration

### Value Properties

| Property   | Type     | Default | Description                              |
| ---------- | -------- | ------- | ---------------------------------------- |
| `value`    | `number` |         | Single value (alias for `to`)            |
| `from`     | `number` |         | Low value for range slider               |
| `to`       | `number` |         | High value for range slider              |
| `minValue` | `number` | `0`     | Minimum allowed value                    |
| `maxValue` | `number` | `100`   | Maximum allowed value                    |
| `step`     | `number` |         | Rounding step for discrete values        |

### Behavior

| Property    | Type      | Default | Description                                           |
| ----------- | --------- | ------- | ----------------------------------------------------- |
| `wheel`     | `boolean` | `false` | Enable mouse wheel control (not with range sliders)   |
| `increment` | `number`  | 1%      | Value change per wheel tick                           |
| `disabled`  | `boolean` | `false` | Disable the slider                                    |
| `vertical`  | `boolean` | `false` | Orient the slider vertically                          |
| `invert`    | `boolean` | `false` | Invert vertical slider (top to bottom)                |

### Appearance

| Property      | Type            | Description                              |
| ------------- | --------------- | ---------------------------------------- |
| `handleStyle` | `string/object` | CSS style for the slider handle          |
| `rangeStyle`  | `string/object` | CSS style for the selected range         |

### Tooltips

| Property       | Type            | Description                              |
| -------------- | --------------- | ---------------------------------------- |
| `valueTooltip` | `string/object` | Tooltip config for the value handle      |
| `fromTooltip`  | `string/object` | Tooltip config for the `from` handle     |
| `toTooltip`    | `string/object` | Tooltip config for the `to` handle       |