Tabris.js Widgets: Slider
The purpose of the Slider widget is to allow the user to select a numeric value in the specified range. It looks like movable indicator on a horizontal line and works like input type="range" tag in HTML.
In JS syntax, simple Slider can be created using the following code:
|
1 2 3 4 5 6 |
import { Slider, contentView } from 'tabris'; new Slider({ left: 16, right: 16, top: 32, selection: 35 }).appendTo(contentView); |
And here is the same snippet in JSX syntax:
|
1 2 3 4 5 |
import {Slider, contentView} from 'tabris'; contentView.append( Slider left={16} right={16} top={32} selection={35}/> ); |
Notice that the slider values can be in the negative range, as long it is lying between -(253 -1) and (253 -1) to be precise. You can modify the widget values passing the exact numbers to it or just its minimum/maximum value. Try the example by scanning its QR code with your Tabris.js mobile app. Also, notice the tintColor attribute – it allows you to change the color of the selection area.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
import { Slider, TextView, Button, contentView } from 'tabris'; contentView.set({ padding: 16 }).append( <$> TextView centerX top='30%' font='22px sans-serif' text='50' /> Slider tintColor='#4c6bad' left={40} right={40} top='prev() 20' minimum={-50} selection={50} maximum={150} onSelectionChanged={ev => $(TextView).only().text = `${ev.value}`} /> Button onSelect={() => $(Slider).only().selection = $(Slider).only().minimum} left={16} right={16} top='prev() 20'>Set to minimum</Button> Button onSelect={() => $(Slider).only().selection = -10} left={16} right={16} top='prev() 20'>Set to -10</Button> Button onSelect={() => $(Slider).only().selection = 125} left={16} right={16} top='prev() 20'>Set to 125</Button> Button onSelect={() => $(Slider).only().selection = $(Slider).only().maximum} left={16} right={16} top='prev() 20'>Set to maximum</Button> </$> ); |
Check out the Slider documentation page to see the list of all available methods and properties.
Feedback is welcome!
Want to join the discussion?Feel free to contribute!
