---
title: "Slider"
description: "Use the slider component to allow users to select a numeric value from a range by dragging a thumb along a track."
sidebar_label: "Slider"
slug: /reference/components/slider
---

import ComponentDemo from '@site/src/components/ComponentDemo';

# Slider

Use the slider component to allow users to select a numeric value from a range by dragging a thumb along a track.

**Package:** `@terreno/ui`  
**Categories:** Component  
**Props interface:** `SliderProps`  
**Story source:** [`demo/stories/Slider.stories.tsx`](https://github.com/flourishhealth/terreno/blob/master/demo/stories/Slider.stories.tsx)

## Live demo

<ComponentDemo name="Slider" />

## Props

| Prop | Type | Required | Description |
| --- | --- | --- | --- |
| `onChange` | `reflection` | Yes | The function to call when the slider value changes. |
| `value` | `number` | Yes | The current value of the slider. |
| `disabled` | `boolean` |  | If true, the slider will be disabled. |
| `errorText` | `string` |  |  |
| `helperText` | `string` |  |  |
| `inlineLabels` | `boolean` |  | If true, displays min and max labels inline on both ends of the track. |
| `labels` | `reflection` |  | Labels to show below the slider track. |
| `maximumTrackTintColor` | `string` |  | The color of the track to the right of the thumb. |
| `maximumValue` | `number` |  | The maximum value of the slider. |
| `minimumTrackTintColor` | `string` |  | The color of the track to the left of the thumb. |
| `minimumValue` | `number` |  | The minimum value of the slider. |
| `showSelection` | `boolean` |  | If true, the slider will show the current value as text. |
| `step` | `number` |  | The step value of the slider. |
| `thumbTintColor` | `string` |  | The color of the thumb. |
| `title` | `string` |  | The title of the slider field. |
| `useIcons` | `boolean` |  | If true, icons will be displayed instead of numeric values when valueMapping is provided. |
| `valueMapping` | `array` |  | Graphics/icons to display instead of numeric values. Maps slider values to icon names or any string. |