# Range
[component-header:sl-range]
Ranges allow the user to select a single value within a given range using a slider.
```html preview
```
```jsx react
import { SlRange } from '@shoelace-style/shoelace/dist/react';
const App = () => (
);
```
?> This component works with standard `