# Slider

(part of package '[Servoy Extra Components](https://docs.servoy.com/reference/servoyextensions/packages/ui-component-packages/servoy-extra-components)')\
Extends designtime/SolutionModel: [JSWebComponent](https://docs.servoy.com/reference/servoycore/dev-api/solutionmodel/jswebcomponent)\
Extends runtime: [RuntimeWebComponent](https://docs.servoy.com/reference/servoycore/dev-api/forms/runtimeform/elements/runtimewebcomponent)

A Servoy Extra Component that displays a slider for selecting numeric values, supporting both single and range selection.

This is a reference page; many components have detailed usage guides [here](https://docs.servoy.com/guides/develop/application-design/ui-components).

## Properties

### autoHideLimitLabels

Set to false to disable the auto-hiding behavior of the limit labels Type: [Boolean](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/boolean) Default Value: false

***

### ceil

Maximum value for a slider Type: [Number](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/number) Default Value: 0

***

### dataChangeOnSlideEnd

Set this to false to update the dataProvider(s) while the user drags the slider and not only when the user is done dragging Type: [Boolean](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/boolean) Default Value: true

***

### dataProvider

The dataProvider for the slider value Type: [Dataprovider](https://docs.servoy.com/servoy-developer/component_and_service_property_types#dataprovider)

***

### dataProviderHigh

The dataProvider for a range slider's maximum value Type: [Dataprovider](https://docs.servoy.com/servoy-developer/component_and_service_property_types#dataprovider)

***

### draggableRange

When set to true and using a range slider, the range can be dragged by the selection bar Type: [Boolean](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/boolean) Default Value: false

***

### draggableRangeOnly

Same as draggableRange but the slider range can't be changed Type: [Boolean](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/boolean) Default Value: false

***

### enabled

Flag indicating whether the slider is enabled for user interaction. Type: [Enabled](https://docs.servoy.com/servoy-developer/component_and_service_property_types#protected) Default Value: true

***

### enforceRange

Set to true to round the value and valueHigh to the slider range Type: [Boolean](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/boolean) Default Value: false

***

### enforceStep

Set to true to force the value to be rounded to the step Type: [Boolean](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/boolean) Default Value: false

***

### floor

Minimum value for a slider Type: [Number](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/number) Default Value: 0

***

### formattingFunction

Can be given a function code as string that can be used to format numbers client side. Type: [Tagstring](https://docs.servoy.com/servoy-developer/component_and_service_property_types#tagstring)

***

### getLegendFunction

Can be given a function code as string that can be used to display legend under ticks Type: [Clientfunction](https://docs.servoy.com/servoy-developer/component_and_service_property_types#clientfunction)

***

### hideLimitLabels

Set to true to hide min / max labels Type: [Boolean](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/boolean) Default Value: false

***

### hidePointerLabels

Set to true to hide pointer labels Type: [Boolean](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/boolean) Default Value: false

***

### logScale

Set to true to use a logarithmic scale to display the slider Type: [Boolean](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/boolean) Default Value: false

***

### maxLimit

The maximum value authorized on the slider. Type: [Number](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/number) Default Value: null

***

### maxRange

The maximum range authorized on the slider. Type: [Number](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/number) Default Value: null

***

### minLimit

The minimum value authorized on the slider. Type: [Number](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/number) Default Value: null

***

### minRange

The minimum range authorized on the slider. Type: [Number](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/number) Default Value: null

***

### noSwitching

Set to true to prevent to user from switching the min and max handles Type: [Boolean](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/boolean) Default Value: false

***

### numberFormat

A Servoy number format that is used to format numbers when a formattingFunction is not provided Type: [Format](https://docs.servoy.com/servoy-developer/component_and_service_property_types#format)

***

### pointerColorFunction

Function provided as a String that returns the color of a tick. Type: [Clientfunction](https://docs.servoy.com/servoy-developer/component_and_service_property_types#clientfunction)

***

### precision

The precision to display values with. Type: [Number](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/number) Default Value: 0

***

### pushRange

Set to true to have a push behavior. When the min handle goes above the max, the max is moved as well Type: [Boolean](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/boolean) Default Value: false

***

### readOnly

Flag indicating whether the slider is in read-only mode. Type: [Protected](https://docs.servoy.com/servoy-developer/component_and_service_property_types#protected) Default Value: false

***

### rightToLeft

Set to true to show graphs right to left. Type: [Boolean](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/boolean) Default Value: false

***

### selectionBarColorFunction

Function code as String that returns the current color of the selection bar. Type: [Clientfunction](https://docs.servoy.com/servoy-developer/component_and_service_property_types#clientfunction)

***

### selectionBarGradient

Use to display the selection bar as a gradient Type: [CustomType\<servoyextra-slider.gradient>](#gradient)

***

### showOuterSelectionBars

Only for range slider. Set to true to visualize in different colour the areas on the left/right (top/bottom for vertical range slider) of selection bar between the handles Type: [Boolean](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/boolean) Default Value: false

***

### showSelectionBar

Set to true to always show the selection bar before the slider handle Type: [Boolean](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/boolean) Default Value: false

***

### showSelectionBarEnd

Set to true to always show the selection bar after the slider handle Type: [Boolean](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/boolean) Default Value: false

***

### showTicks

Set to true to display a tick for each step of the slider Type: [Boolean](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/boolean) Default Value: false

***

### showTicksValues

Set to true to display a tick and the step value for each step of the slider Type: [Boolean](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/boolean) Default Value: false

***

### step

Step between each value Type: [Number](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/number) Default Value: 1

***

### stepsArray

If you want to display a slider with non linear/number steps. Type: [Array\<Number>](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/number)

***

### stepsValueList

If you want to provide all the steps with display and real values, you can provide a value list to provide step values (realValues) and step labels (displayValues). Type: [Valuelist](https://docs.servoy.com/servoy-developer/component_and_service_property_types#valuelist)

***

### styleClass

CSS style classes applied to the slider component. Type: [Styleclass](https://docs.servoy.com/servoy-developer/component_and_service_property_types#styleclass)

***

### tickColorFunction

Function provided as a String that returns the color of a tick. Type: [Clientfunction](https://docs.servoy.com/servoy-developer/component_and_service_property_types#clientfunction)

***

### ticksArray

Use to display ticks at specific positions. The array contains the index of the ticks that should be displayed. Type: [Array\<Number>](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/number)

***

### ticksInterval

Number of steps between each tick to display ticks at intermediate positions. In Titanium Client you cannot select by click values between ticks, you can only drag slider pointer to select. Type: [Number](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/number) Default Value: null

***

### ticksTooltipFunction

Function provided as string that returns the tooltip content for a tick. Type: [Clientfunction](https://docs.servoy.com/servoy-developer/component_and_service_property_types#clientfunction)

***

### ticksValuesInterval

Number of steps between each tick to display tick values at intermediate positions Type: [Number](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/number) Default Value: 0

***

### ticksValuesTooltipFunction

Function provided as string that returns the tooltip content for a tick value. Type: [Clientfunction](https://docs.servoy.com/servoy-developer/component_and_service_property_types#clientfunction)

***

### vertical

Set to true to display the slider vertically. Type: [Boolean](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/boolean) Default Value: false

***

### visible

Flag indicating whether the slider is visible. Type: [Boolean](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/boolean) Default Value: true

***

## Events

### onDataChangeHigh(oldValue,newValue,event)

Called when the dataProviderHigh value changed

**Parameters:**

> * {[${dataproviderType}](https://docs.servoy.com/servoy-developer/component_and_service_property_types#dataprovider)} oldValue The previous high slider value.
> * {[${dataproviderType}](https://docs.servoy.com/servoy-developer/component_and_service_property_types#dataprovider)} newValue The new high slider value.
> * {[JSEvent](https://docs.servoy.com/reference/servoycore/dev-api/application/jsevent)} event The event object associated with the data change.

**Returns:** {[Boolean](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/boolean)}

***

### onDataChangeMethodID(oldValue,newValue,event)

Called when the dataProvider value changed

**Parameters:**

> * {[${dataproviderType}](https://docs.servoy.com/servoy-developer/component_and_service_property_types#dataprovider)} oldValue The previous slider value.
> * {[${dataproviderType}](https://docs.servoy.com/servoy-developer/component_and_service_property_types#dataprovider)} newValue The new slider value.
> * {[JSEvent](https://docs.servoy.com/reference/servoycore/dev-api/application/jsevent)} event The event object associated with the data change.

**Returns:** {[Boolean](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/boolean)}

***

### onSlideEnd(event,value,highValue,pointerType)

Called when user stops dragging the slider

**Parameters:**

> * {[JSEvent](https://docs.servoy.com/reference/servoycore/dev-api/application/jsevent)} event The event object associated with the slide end.
> * {[Object](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/object)} value The value when the user stopped dragging the pointer of a non-range slider or the low value in a range slider.
> * {[Object](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/object)} highValue The high value when the user stopped dragging the pointer in a range slider.
> * {[String](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/string)} pointerType Either "value" or "high", indicating which pointer was used.

***

### onSlideStart(event,value,highValue,pointerType)

Called when user starts dragging the slider

**Parameters:**

> * {[JSEvent](https://docs.servoy.com/reference/servoycore/dev-api/application/jsevent)} event The event object associated with the slide start.
> * {[Object](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/object)} value The value when the user dragged the pointer of a non-range slider or the low value in a range slider.
> * {[Object](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/object)} highValue The high value when the user dragged the pointer in a range slider.
> * {[String](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/string)} pointerType Either "value" or "high", indicating which pointer was dragged.

***

### onTick(value,highValue,pointerType,rightToLeft)

Called when user clicks on a tick or drags the slider pointer to a tick

**Parameters:**

> * {[Object](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/object)} value The value when the user ticked/ dragged the pointer of a non-range slider or the low value in a range slider.
> * {[Object](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/object)} highValue The high value when the user ticked/ dragged the pointer in a range slider.
> * {[String](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/string)} pointerType Either "value" or "high", indicating which pointer was used.
> * {[Boolean](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/boolean)} rightToLeft True - if the slider is displayed right to left, false - if the slider is displayed left to right.

***

## API

### refresh()

Refreshes the slider

***

## Types

## gradient

Represents a gradient configuration for the slider selection bar. scripting type: CustomType\<servoyextra-slider.gradient>

* from
  * The starting color of the gradient.
  * **Type**: [color](https://docs.servoy.com/servoy-developer/component_and_service_property_types#color)
* to
  * The ending color of the gradient.
  * **Type**: [color](https://docs.servoy.com/servoy-developer/component_and_service_property_types#color)

***