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

JavaScript
JavaScript
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.

JavaScript
JavaScript
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);