Sliders

Sliders are quite easy to use in bbUI. Simply add an HTML5 input of type="range" and you are good to go

<input type="range" min="0" max="100" step="10" value="10" onchange="doSomething(this.value)" />

When using BlackBerry 10 styling this control will be displayed according to the UI specifications found on BlackBerry 10. If you are using a range input on BB6/BB7/PlayBook you will get the normal "Mozilla style" slider.

When BlackBerry 10 styling is applied it will stretch the slider to 100% of the width of its containing element/div. The highlight color of the slider will use the highlightColor provided in the toolkit init() function.

You can use the min and max values to set your range, set your initial value and also provide a step value. The step value will make sure that the onchange will only be fired when the slider has been moved more than the step threshold. This allows you to throttle the number of onchange events you'll receive.

JavaScript Interface

The following JavaScript interfaces are available for dynamically manipulating a Slider after the screen has been added to the DOM

setValue(value)

To move the slider via code there has been a setValue(int) function added to the <range> element. This allows the value to be set and also apply the visual styling.

function setMyValue() {
   var value = 10;
   document.getElementById('myrange').setValue(value);
}

When you set the value of the slider it is best to do it with a setTimeout so that the UI thread gets a chance to paint. This function allows you to do things like have the slider move while a video is playing and then have the user move it forward/backward to skip to different areas of the video.