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.

<mobiscroll.Slider />

The <mobiscroll.Slider /> renders single or multiple range inputs wrapped inside a label element, based on the value prop. In addition to the Slider attributes, it supports the following props:

<mobiscroll.Slider value={10} max={20} min={5} data-tooltip="true" data-icon="link">
    My Single Slider
</mobiscroll.Slider>
    
<mobiscroll.Slider value={[this.state.firtValue, 50, 60]} data-icon="copy3" data-live={true} step={5} onChange={this.sliderChange} data-tooltip="true" data-step-labels="[0, 10, 20, 30, 40, 50]">
    My Multi-Handle Slider
</mobiscroll.Slider>

For many more examples - simple and complex use-cases - check out the slider demos for react.

Attributes

<div class="mbsc-ic mbsc-ic-star"></div>

Methods

mobiscrollInstance.getVal();

mobiscrollInstance.setVal(50);

Slider theming

Global variables of the Slider

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

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:

Windows Dark theme

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

Material theme

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

Material Dark theme

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

Mobiscroll theme

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

Mobiscroll Dark theme

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

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