Widget “Slider”

Extends Widget

A widget representing a numeric value as an movable indicator on a horizontal line.

You can import this type like this:

import {Slider} from 'tabris';

Or reference it directly form anywhere as “tabris.Slider”. Android | iOS — | — Slider on Android | Slider on iOS

Properties

maximum

Type: number, default: 100

The maximum value.

minimum

Type: number, default: 0

The minimum value.

selection

Type: number, default: 0

The actual value.

tintColor

Type: Color

The color used to display the current selection.

Events

maximumChanged

Fired when the maximum property has changed.

Event Parameters

  • target: this The widget the event was fired on.

  • value: number The new value of maximum.

minimumChanged

Fired when the minimum property has changed.

Event Parameters

  • target: this The widget the event was fired on.

  • value: number The new value of minimum.

select

Fired when the selection property is changed by the user.

Event Parameters

  • target: this The widget the event was fired on.

  • selection: number The new value of selection.

selectionChanged

Fired when the selection property has changed.

Event Parameters

  • target: this The widget the event was fired on.

  • value: number The new value of selection.

tintColorChanged

Fired when the tintColor property has changed.

Event Parameters

  • target: this The widget the event was fired on.

  • value: Color The new value of tintColor.

Example

import {Slider, TextView, ui} from 'tabris';

// Create a slider with a selection handler

let textView = new TextView({
  left: 10, right: 10, top: '30%',
  alignment: 'center',
  font: '22px sans-serif',
  text: '50'
}).appendTo(ui.contentView);

new Slider({
  left: 50, top: [textView, 20], right: 50,
  minimum: -50,
  selection: 50,
  maximum: 150
}).on('selectionChanged', ({value}) => textView.text = value)
  .appendTo(ui.contentView);

See also