# Slider

## Pure Owl component

```js
import { Slider } from "@thebase/ui";
```

```base-ui
<div style="width: 60%; max-width: 28rem">
  <Slider value="33" max="100" step="1"/>
</div>
```

| Component | Prop | Type | Notes |
| --- | --- | --- | --- |
| `Slider` | `value` | `Number | String` | optional |
| `Slider` | `min` | `Number | String` | optional |
| `Slider` | `max` | `Number | String` | optional |
| `Slider` | `step` | `Number | String` | optional |
| `Slider` | `disabled` | `Boolean` | optional |
| `Slider` | `className` | `String` | optional |
| `Slider` | `onChange` | `Function` | optional |

See [Pure Owl Components](/examples/blocks.html#/docs/guide/owl-components) for how to load `@base/owl` and `dist/baseui.templates.xml`.

## Static component

```base-ui
<input b-ui="slider" type="range" min="0" max="100" value="50">
```