You are here: Creating a Slider

Slider Widget

A Slider widget allows you to select a value from a defined range of values by moving the thumb (an indicator) in a horizontal direction. The Slider widget consists of a seekbar (or track), and a thumb (a control that you can slide). You can optionally choose to display a minimum value and a maximum value. When you drag the thumb along the slider, the value or process is updated continuously, and is displayed on the track (you must define an event to achieve this behavior).

A Slider widget allows you to select a value from a range of values by moving the thumb (an indicator) in a horizontal direction.

Following are real-time use cases of slider widget:

• Volume and brightness controls: Slider is mainly used in controlling volume and brightness in devices.

• Price Range: You can select the price range using a slider in a shopping application.

• Adjusting zoom levels: Slider widget can be used to adjust the zoom levels of a document, map etc.

• Media Player: Slider widget can also be used as a seek bar in Media player related applications. It can be used to track the progress of the song being played.

Widgets are normally added to your application using Volt MX Iris, but can also be added from code. For general information on using widgets in Volt MX Iris, see Designing an Application in the Iris User Guide.

For general information on the Slider widget see the Slider topic in the Volt MX Iris User Guide.

The Slider widget capabilities can be broadly categorized into the following:

• Layout
• Data Management
• Animations
• 3D Touch
• User Input Handling
• UI Appearance
• Enabling RTL
• Miscellaneous
• Configurations Common To All Widgets

Layout

Animations

Data Management

3D Touch

User Input Handling

UI Appearance

Enabling RTL

Miscellaneous

Configurations Common To All Widgets

Slider Widget Basics

Creating a Slider Using a Constructor: voltmx.ui.Slider

var slider = new voltmx.ui.Slider(basicConf, layoutConf, pspConf);

• basicConf is an object with basic properties.
• layoutConf is an object with layout properties.
• pspConf is an object with platform specific properties.

Note: The configuration properties should be passed only in the respective configuration objects otherwise they are ignored

Example

//The following function is the callback function for onSelectCallback event
function onSelectCallBck(slider) {
    /*Write your logic here */
}

//Defining the properties for Slider with "onSelectCallback" event 
var sliderBasic = {
    id: "slider",
    info: {
        key: "SLIDER"
    },
    min: 0,
    max: 100,
    step: 1,
    isVisible: true,
    leftSkin: "lKin",
    rightSkin: "rSkin",
    thumbImage: "thumb.png",
    focusThumbImage: "fThumb.png",
    selectedValue: 50,
    onSelection: onSelectCallBck
}
var sliderLayout = {
    margin: [5, 5, 5, 5],
    marginInPixel: true,
    widgetAlignment: constants.WIDGET_ALIGN_CENTER,
    containerWeight: 99
};

var sliderPSP = {};

//Creating the Slider.
var slider = new voltmx.ui.Slider(sliderBasic, sliderLayout, sliderPSP);

//Reading onSelectCallback event of the Slider.
alert("Slider onSelectCallback is ::" + slider.onSelectCallback);

Customizing Appearance

You can customize the appearance of the Slider widget using the following platform specific properties:

• leftSkin: Specifies the skin to be applied to the background of the slider on left side of the thumb image of the seekbar.
• rightSkin: Specifies the skin to be applied to the background of the slider on right side of the thumb image of the seekbar.
• minLabel: Specifies the text or number to be displayed for the minimum value of the slider.
• maxLabel: Specifies the text or number to be displayed for the maximum value of the slider.
• thickness: Specifies the thickness of the seekbar.
• minLabelSkin: Specifies the skin for the minLabel property of the slider.
• maxLabelSkin: Specifies the skin for the maxLabel property of the slider.

Important Considerations

• All platforms (except iPhone): The slider widget does not display the minimum and maximum values unless the minLabel and maxLabel are specified.
• iPhone: You cannot display the minimum and maximum values. You can use the minValueImage and the maxValueImage to indicate the values.