---
title: "Vision - Slider"
description: "The slider component lets the user drag an indicator along a scale to choose a value in a range. The slider can be configured to orient horizontally or vertically."
---

# Vision - Slider

> The slider component lets the user drag an indicator along a scale to choose a value in a range. The slider can be configured to orient horizontally or vertically.

![](slider.png)

**Component Palette Icon**:

![](slider1.png)

## Properties
| Property 	| Description 	| Property Type 	| Scripting 	| Category 	|
|---	|---	|---	|---	|---	|
| Background Color 	| The background color of the component. 	| Color 	| .background 	| Appearance 	|
| Border 	| The border surrounding this component. Options are: No border, Etched (Lowered), Etched (Raised), Bevel (Lowered), Bevel (Raised), Bevel (Double), Field Border, and Line Border.**Note**: The border is unaffected by rotation. 	| Border 	| .border 	| Common 	|
| Cursor 	| The mouse cursor to use when hovering over this component. Options are: Default, Crosshair, Text, Wait, Hand, Move, SW Resize, or SE Resize. 	| int 	| .cursorCode 	| Common 	|
| Defer Updates 	| Only publish updates to value when not actively being changed. 	| boolean 	| .deferred 	| Behavior 	|
| Enabled 	| If disabled, a component cannot be used. 	| boolean 	| .componentEnabled 	| Common 	|
| Font 	| Font of text on this component. 	| Font 	| .font 	| Appearance 	|
| Foreground Color 	| The foreground color of the component. Can be chosen from color wheel, chosen from color palette, or entered as  RGB  or  HSL  value. See Color Selector . 	| Color 	| .foreground 	| Appearance 	|
| Horizontal Slider 	| If true, slider is horizontal, otherwise, it's vertical. 	| boolean 	| .horizontal 	| Appearance 	|
| Inverted? 	| Specify true to reverse the value range shown for the slider and false to put the value range in the normal order. 	| boolean 	| .inverted 	| Behavior 	|
| Major Tick Spacing 	| The distance, measured in values, between each major tick mark. 	| int 	| .majorTickSpacing 	| Appearance 	|
| Maximum Value 	| The value when the slider is all the way right or up. 	| int 	| .maximum 	| Data 	|
| Minimum Value 	| The value when the slider is all the way left or down. 	| int 	| .minimum 	| Data 	|
| Minor Tick Spacing 	| The distance, measured in values, between each minor tick mark. 	| int 	| .minorTickSpacing 	| Appearance 	|
| Mouseover Text 	| The text that is displayed in the tooltip which pops up on mouseover of this component. 	| String 	| .toolTipText 	| Common 	|
| Name 	| The name of this component. 	| String 	| .name 	| Common 	|
| Paint Labels? 	| If true, value labels will be shown. 	| boolean 	| .paintLabels 	| Appearance 	|
| Paint Ticks? 	| If true, value tick marks will be shown. 	| boolean 	| .paintTicks 	| Appearance 	|
| Paint Track? 	| If true, the track of the slider will be shown. 	| boolean 	| .paintTrack 	| Appearance 	|
| Quality 	| The data quality code for any Tag bindings on this component. 	| QualityCode 	| .quality 	| Data 	|
| Snap To Ticks? 	| Only allows selection of values at the tick marks. 	| boolean 	| .snapToTicks 	| Behavior 	|
| Styles 	| Contains the component's styles. 	| Dataset 	| .styles 	| Appearance 	|
| Value 	| The current value of the slider. 	| int 	| .value 	| Data 	|
| Visible 	| If disabled, the component will be hidden. 	| boolean 	| .visible 	| Common 	|

### Deprecated Properties
| Property 	| Description 	| Property Type 	| Scripting 	| Category 	|
|---	|---	|---	|---	|---	|
| Data Quality 	| The data quality code for any Tag bindings on this component. 	| int 	| .dataQuality 	| Deprecated 	|
## Scripting

### Component Functions
This component does not have component functions associated with it.

### Extension Functions
This component does not have extension functions associated with it.

### Event Handlers
Event handlers allow you to run a script based off specific triggers. See the full list of available event handlers on the [Component Events](ignition-modules/vision/scripting-in-vision/component-events/component-events.md) page

## Customizers
+ [Vision Component Customizers](ignition-modules/vision/working-with-vision-components/vision-component-customizer/vision-component-customizer.md)
+ [Style Customizer](ignition-modules/vision/working-with-vision-components/vision-component-customizer/vision-component-customizer.md#style-customizer)

## Examples

```python title="Code Snippet"
#The following code will return the value of the slider's previous value into a variable.
#This code is fired on the property change scripting for this component.

oldValue = event.source.oldValue
```

### Vertical Slider with Border and Blue Text

![](slider2.png)

|Property Type| Value|
|--|--|
|Maximum Value |250 |
|Minor Tick Spacing |25 |
|Foreground Color |0,0,255 |
|Major Tick Spacing |50 |

### Horizontal Slider without Tickmarks

![](slider3.png)

|Property Type| Value|
|--|--|
|Paint Ticks? |False |
|Minor Tick Spacing |0 |
|Major Tick Spacing |100 |