Smartface Developer Center

Smartface Developer Center

Welcome to the Smartface Developer Hub. You'll find comprehensive guides and documentation to help you start developing and managing native iOS and Android apps with Smartface Cloud.

Get Started    

RangeSlider

API Reference: UI.RangeSlider

RangeSlider is a double thumb on the track slider that allows sliding through possible values between the desired range.

Note:

snapStepSize property is the minimum step between a range, thus it must be less than the maxValue and defined after the minValue & maxValue.

maxValue should not be less than minValue.

Range slider support single thumb as well by rangeEnabled property

const Image = require("sf-core/ui/image");
const Application = require("sf-core/application");
const Page = require("sf-core/ui/page");
const extend = require("js-base/core/extend");
const Color = require('sf-core/ui/color');
const FlexLayout = require('sf-core/ui/flexlayout');
const RangeSlider = require('sf-core/ui/rangeslider');

var Page1 = extend(Page)(
    function(_super) {
        _super(this, {
            onShow: function(params) {
                Application.statusBar.visible = false;
                this.headerBar.visible = false;
            }
        });

        this.layout.justifyContent = FlexLayout.JustifyContent.CENTER;

        let myRangeSlider = new RangeSlider({
            height: 200,
            trackColor: Color.create("#00A1F1"),
            outerTrackColor: Color.create("#eaedf2"),
            minValue: 0,
            maxValue: 200,
            trackWeight: 20,
            snapStepSize: 2,
            rangeEnabled: true,
            isTrackRounded: true,
            android: {
                thumbColor: Color.BLUE,
                thumbBorderColor: Color.GREEN,
                thumbBorderWidth: 1,
                thumbSize: 15,
                outerTrackWeight: 15,
            },
            ios: {
                isHapticSnap: true,
                showsThumbImageShadow: true,
                thumbImage: Image.createFromFile("images://icon.png"),
            },
            onValueChange: (value) => {
                console.log("Value : " + value);
            }
        });
        this.layout.addChild(myRangeSlider);
    }
);
module.exports = Page1;

Thumb Shadow in iOS:

The color, opacity and radius of the rangeSlider thumb shadow can be modified.

thumb shadow changes are not applied until applyThumbViewChanges() is calledout.

const Color = require('sf-core/ui/color');
const FlexLayout = require('sf-core/ui/flexlayout');
const RangeSlider = require('sf-core/ui/rangeslider');
const extend = require("js-base/core/extend");
let myRangeSlider = new RangeSlider({
    height: 200,
    trackColor: Color.create("#00A1F1"),
    outerTrackColor: Color.create("#eaedf2"),
    minValue: 0,
    maxValue: 200,
    trackWeight: 20,
    snapStepSize: 2,
    rangeEnabled: true,
    isTrackRounded: true,
    ios: {
        
        isHapticSnap: true,
        showsThumbImageShadow: true,  
        thumbShadowColor: Color.RED, 
        thumbShadowOpacity: 1,
        thumbShadowRadius: 1,

    },
    onValueChange: (value) => {
        console.log("Value : " + value);
    }
});
myRangeSlider.ios.applyThumbViewChanges();
myRangeSlider.ios.thumbShadowOffset = {
            x: 5.0,
            y: 0.0
        }
this.layout.addChild(myRangeSlider);

Updated a day ago

RangeSlider


API Reference: UI.RangeSlider

Suggested Edits are limited on API Reference Pages

You can only suggest edits to Markdown body content, but not to the API spec.