General Date & Time pickers Event Calendar Form components Gesture enabled responsive list Numeric pickers Pickers & dropdowns Page layout & navigation Tools Accessibility

Slider

The slider control can be used to select one or more numeric value.
Inputs with type="range" will be transformed into slider controls.
If multiple range inputs are wrapped in the same container, multiple handles will be displayed on the slider track.

Here is an example for the slider component
angular
.module('myModule',['mobiscroll-form']) // creating module and setting dependency
.controller('myController', ['$scope', function ($scope) {
    $scope.sliderProperty = 10;
}]);
Simple slider
<label>
    <input type="range" mobiscroll-slider ng-model="sliderProperty"/>
</label>
Slider with tooltip
<label>
    <input type="range" data-tooltip="true" mobiscroll-slider ng-model="sliderProperty"/>
</label>
With value and template
<label>
    Label 
    <input type="range" data-val="left" data-template="{value}/{max}" mobiscroll-slider ng-model="sliderProperty">
</label>
With steps and step labels
<label>
    Step labels 1
    <input type="range" data-tooltip="true" step="25" data-step-labels="[0, 25, 50, 75, 100]" mobiscroll-slider ng-model="sliderProperty">
</label>
With icon and value
<label>
    Icon and value
    <input type="range" data-icon="plus" min="22"  step="10" value="32" max="119" data-val="right" data-template="${value}" mobiscroll-slider ng-model="sliderProperty">
</label>
With two handles
<label>
    Two handles
    <input type="range" value="25" step="25" mobiscroll-slider ng-model="sliderProperty">
    <input type="range" value="75" mobiscroll-slider ng-model="sliderProperty">
</label>
With four handles
<label class="test">
    Multiple handles
    <input type="range" value="5" data-tooltip="true" mobiscroll-slider ng-model="sliderProperty">
    <input type="range" value="15" data-tooltip="true" mobiscroll-slider ng-model="sliderProperty">
    <input type="range" value="55" data-tooltip="true" mobiscroll-slider ng-model="sliderProperty">
    <input type="range" value="75" data-tooltip="true" mobiscroll-slider ng-model="sliderProperty">
</label>

To use the directives of this module you have to set a dependency in you app to 'mobiscroll-slider'

Directive Type Description
mobiscroll-slider Object Attribute for the slider control. Sets up the mobiscroll initialization object. ex.: "{ theme: 'ios' }"
ng-model Number The Angular JS frameworks native ng-model directive. Used to tie the scope value to the mobiscroll component.

Attributes

Name Description
data-highlight If an input has the data-highlight="false" attribute, only the handles are highlighted and the progress bar is not.
data-icon Specify icons for a button, textbox, textarea, stepper, segmented control, slider, progress or select. A font-icon name should be passed.

You can build your custom icon set on our download page ("Choose Icon Set" section).

See the full list of available icons here.

The default icon pack contains the following icons:
  • home
  • pencil
  • office
  • newspaper
  • droplet
  • image2
  • camera
  • play
  • bullhorn
  • connection
  • library
  • book
  • file4
  • copy2
  • copy3
  • stack
  • folder
  • tag
  • cart
  • support
  • phone
  • location
  • credit
  • map
  • history
  • clock
  • alarm2
  • stopwatch
  • calendar
  • mobile
  • drawer
  • undo2
  • redo2
  • forward
  • reply
  • bubble
  • bubbles
  • disk
  • download
  • upload
  • user4
  • key2
  • lock2
  • unlocked
  • cogs
  • aid
  • bars
  • cloud-download
  • cloud-upload
  • globe
  • airplane
  • earth
  • link
  • flag
  • eye
  • eye-blocked
  • attachment
  • star3
  • heart
  • thumbs-up
  • thumbs-up2
  • smiley2
  • sad2
  • checkmark
  • close
  • plus
  • minus
  • remove
  • loop2
You can use the icons anywhere in your app using the mbsc-ic mbsc-ic-{iconName} classes, e.g.:
<div class="mbsc-ic mbsc-ic-star"></div>
data-live If an input has the data-live="true" attribute, the value will be updated while the slider handle is moved. If data-live="false", the value will be updated when the handle is released.
data-step-labels Values to display under the slider track. Should be passed as an array, e.g. data-step-labels="[0, 25, 50, 75, 100]".
data-target Specify a target element, where the slider value will be displayed. The string should be a CSS selector, e.g. #slider_value
data-template Template for the slider value. '{value}' stands for the slider current value, and '{max}' stands for the slider maximum value. Any other character in the template will be handled as literal string.
data-tooltip If true, a tooltip with the current value will be displayed above the slider handle while moving.
data-val Specify the value position. It can be "left" or "right", it defaults to "left" if not specified.
disabled If an element has the disabled attribute, the element will be disabled.
max Specify the maximum value that can be selected.
min Specify the minimum value that can be selected.
step Specify the step between values.
value Specify the initial value of the slider.

Methods

Name Description
getVal() Returns the slider value.

Returns: Number

  • The slider value.

Example

Methods can be called on an instance. For more details see calling methods
$scope.mobiscrollInstance.getVal();
setVal(value) Sets the slider value.

Parameters

  • value: Number - The slider value.

Example

Methods can be called on an instance. For more details see calling methods
$scope.mobiscrollInstance.setVal(50);

Slider theming

Global variables of the Slider

Below you will find a list of SASS variables that affect the Slider:

Variable name Description
$mbsc-form-background-light Affects the background color of the Slider along with the Checkbox, Switch, Radio button, Button, Progress, Segmented, Stepper, Rating and Groups
$mbsc-form-background-dark
$mbsc-form-text-light Affects the label color of the Slider.
It also affects other components: Checkbox, Switch, Radio button, Button, Progress, Segmented, Stepper, Rating and Groups
$mbsc-form-text-dark
$mbsc-form-accent-light Affects the accent color of the Slider along with the Checkbox, Switch, Radio button, Button, Progress, Segmented, Stepper, Rating and Groups controls.
$mbsc-form-accent-dark

If you really want to get sophisticated or if a color doesn't look good on a specific theme and you want to overwrite it, you can fine tune all of the above variables individually for each theme. Below are the complete list of variables broken down to themes:

Windows theme

The following variables are specific to the Windows theme light variant:

Variable name Default value Description
$mbsc-windows-form-background
#ffffff
Affects the background color of the Slider along with the Checkbox, Switch, Radio button, Button, Progress, Segmented, Stepper, Rating and Groups
$mbsc-windows-form-text
#262626
Affects the label color of the Slider. It also affects other components: Checkbox, Switch, Radio button, Button, Progress, Segmented, Stepper, Rating and Groups
$mbsc-windows-form-accent
#0078d7
Affects the accent color of the Slider along with the Checkbox, Switch, Radio button, Button, Progress, Segmented, Stepper, Rating and Groups controls.

Windows Dark theme

The following variables are specific to the Windows theme dark variant:

Variable name Default value Description
$mbsc-windows-dark-form-background
#000000
Affects the background color of the Slider along with the Checkbox, Switch, Radio button, Button, Progress, Segmented, Stepper, Rating and Groups
$mbsc-windows-dark-form-text
#ffffff
Affects the label color of the Slider. It also affects other components: Checkbox, Switch, Radio button, Button, Progress, Segmented, Stepper, Rating and Groups
$mbsc-windows-dark-form-accent
#0078d7
Affects the accent color of the Slider along with the Checkbox, Switch, Radio button, Button, Progress, Segmented, Stepper, Rating and Groups controls.
Windows theme variables for the Slider component

Material theme

The following variables are specific to the Material theme light variant:

Variable name Default value Description
$mbsc-material-form-background
#eeeeee
Affects the background color of the Slider along with the Checkbox, Switch, Radio button, Button, Progress, Segmented, Stepper, Rating and Groups
$mbsc-material-form-text
#6d6d6d
Affects the label color of the Slider. It also affects other components: Checkbox, Switch, Radio button, Button, Progress, Segmented, Stepper, Rating and Groups
$mbsc-material-form-accent
#019687
Affects the accent color of the Slider along with the Checkbox, Switch, Radio button, Button, Progress, Segmented, Stepper, Rating and Groups controls.

Material Dark theme

The following variables are specific to the Material theme dark variant:

Variable name Default value Description
$mbsc-material-dark-form-background
#303030
Affects the background color of the Slider along with the Checkbox, Switch, Radio button, Button, Progress, Segmented, Stepper, Rating and Groups
$mbsc-material-dark-form-text
#d4d4d4
Affects the label color of the Slider. It also affects other components: Checkbox, Switch, Radio button, Button, Progress, Segmented, Stepper, Rating and Groups
$mbsc-material-dark-form-accent
#81ccc4
Affects the accent color of the Slider along with the Checkbox, Switch, Radio button, Button, Progress, Segmented, Stepper, Rating and Groups controls.
Material theme variables for the Slider component

Mobiscroll theme

The following variables are specific to the Mobiscroll theme light variant:

Variable name Default value Description
$mbsc-mobiscroll-form-background
#f7f7f7
Affects the background color of the Slider along with the Checkbox, Switch, Radio button, Button, Progress, Segmented, Stepper, Rating and Groups
$mbsc-mobiscroll-form-text
#454545
Affects the label color of the Slider. It also affects other components: Checkbox, Switch, Radio button, Button, Progress, Segmented, Stepper, Rating and Groups
$mbsc-mobiscroll-form-accent
#4fccc5
Affects the accent color of the Slider along with the Checkbox, Switch, Radio button, Button, Progress, Segmented, Stepper, Rating and Groups controls.

Mobiscroll Dark theme

The following variables are specific to the Mobiscroll theme dark variant:

Variable name Default value Description
$mbsc-mobiscroll-dark-form-background
#263239
Affects the background color of the Slider along with the Checkbox, Switch, Radio button, Button, Progress, Segmented, Stepper, Rating and Groups
$mbsc-mobiscroll-dark-form-text
#f7f7f7
Affects the label color of the Slider. It also affects other components: Checkbox, Switch, Radio button, Button, Progress, Segmented, Stepper, Rating and Groups
$mbsc-mobiscroll-dark-form-accent
#4fccc5
Affects the accent color of the Slider along with the Checkbox, Switch, Radio button, Button, Progress, Segmented, Stepper, Rating and Groups controls.

If you are looking for the generic Form variables and how they affect the form in general, check out the tables and pictures here.