---
title: "Perspective - Slider"
description: "The Slider component lets the user drag an indicator along a scale to choose a value in a range."
---

# Perspective - Slider

> The Slider component lets the user drag an indicator along a scale to choose a value in a range.

![](img1.png)

**Component Palette Icon**:  

![](img2.png)

## Description

The Slider component lets the user drag an indicator along a scale to choose a value in a range. Enable the "show" and "interval" properties under "labels" to visually display the values within a range. The slider can be configured to orient horizontally or vertically with the "orientation" property. 

## Properties

Most Properties have binding options. For more information on Bindings, see [Types of Bindings in Perspective](ignition-modules/perspective/working-with-perspective-components/bindings-in-perspective/bindings-in-perspective.md).
This section only documents the Props Category of properties. The other Categories are described on the [Perspective Component Properties](ignition-modules/perspective/working-with-perspective-components/perspective-component-properties.md) page.

| Name        | Description     | Property Type  | 
| ----------- | ---------------------- | ------------- |
| value       | Value represented by slider handle. Current value of the slider.   | value: numeric |
| min         | The minimum value for the slider scale: all the way left or down.       | value: numeric |
| max         | The maximum value for the slider scale: all the way right or up.     | value: numeric |
| orientation | Specifies whether the slider track is aligned vertically or horizontally.      | value: boolean |
| step        | Intervals along track at which a value may be set. Specifies the size of increments between values of the slider.**Note:** This does not force the value into that step size. Setting the slider value manually or through a binding will cause it to show the actual value.   | value: numeric |
| labels      | Label settings along the track.**show**: If true, displays labels at periodic values along track. Value is boolean.**interval**: Interval at which to display periodic labels along track. Value is numeric.| object |
| enabled     | Whether slider interaction is currently active.**Note:** If the component is disabled, scripts can still run on the component. For example, if you add a [script action](../../../../../ignition-modules/perspective/working-with-perspective-components/component-events-and-actions.md#script-action) to the onClick event, the script will fire when the user clicks on the Slider. | value: boolean |
| handleColor | Color of slider handle. Can be chosen from color wheel, chosen from color palette, or entered as RGB or HSL value. See [Color Selector Reference](../../../../reference-pages/color-selector-reference/color-selector-reference.mdx).   | color          |
| trackColor  | Color of slider track. See [Color Selector Reference](../../../../reference-pages/color-selector-reference/color-selector-reference.mdx).         | color          |
| style       | Sets a style for this component. Full menu of [style options](appendix/reference-pages/style-reference.md) is available for text, background, margin and padding, border, shape and miscellaneous. You can also specify a [style class](ignition-modules/perspective/styles/style-classes/style-classes.md). | object         |

## Component Events

The [Perspective Event Types Reference](appendix/reference-pages/perspective-event-types-reference.md) page describes all the possible component event types for Perspective components. Not all component events support each Perspective component. The [Component Events and Actions](ignition-modules/perspective/working-with-perspective-components/component-events-and-actions.md) page shows how to configure events and actions on a Perspective component. Component scripting is handled separately and can be accessed from the Component menubar or by right clicking on the component.

## Example

![](img3.png)

|Property|Value|
|--|--|
|props.value|65|
|props.orientation|	vertical|
|props.step|	5|
|props.labels.show	|true|
|props.labels.interval	|10|
|props.handleColor|	#8AFF8A|
|props.trackColor|	#CCFFFF|