Theme Configurator

Header Options
Navbar Options

Material Style

Components Menu

Sliders

You can know more about this plugin and how to work with it from javascript on its official website.

Basic Slider

With Focus

Range: 0 - 100 | Steps: 1

Range: 0 - 100 | Steps: 10

Without Focus

Range: 0 - 20 | Steps: 1

Range: -10 - 10 | Steps: 2

Full Width Example

Specific width

<input class="ms-slider" data-slider-id='ex1Slider' type="text" data-slider-min="0" data-slider-max="100" data-slider-step="1" data-slider-value="50" data-slider-focus="true" />

<input class="ms-slider" data-slider-id='ex1Slider' type="text" data-slider-min="0" data-slider-max="100" data-slider-step="10" data-slider-value="50" data-slider-focus="true" />

<input class="ms-slider" data-slider-id='ex1Slider' type="text" data-slider-min="0" data-slider-max="20" data-slider-step="1" data-slider-value="14"  />

<input class="ms-slider" data-slider-id='ex1Slider' type="text" data-slider-min="-10" data-slider-max="10" data-slider-step="2" data-slider-value="0" />

<input class="ms-slider" data-slider-id='ex1Slider' type="text" data-slider-min="0" data-slider-max="100" data-slider-step="1" data-slider-value="50" data-slider-focus="true" />

<input class="ms-slider" data-slider-id='ex1Slider' type="text" data-slider-min="0" data-slider-max="100" data-slider-step="1" data-slider-value="50" data-slider-focus="true" />

Advance Sliders

Range selector

With Solid Handle

Without Tooltip

Disabled

<input type="text" class="ms-slider" value="" data-slider-min="0" data-slider-max="255" data-slider-step="1" data-slider-value="128" data-slider-id="RC" data-slider-tooltip="hide" data-slider-tooltip="hide" />

<input type="text" class="ms-slider" value="" data-slider-min="10" data-slider-max="1000" data-slider-step="5" data-slider-value="[300,950]" data-slider-tooltip="hide" />

<h3>Disabled</h3>

<input id="ex7" type="text" class="ms-slider" data-slider-min="0"  data-slider-max="20" data-slider-step="1" data-slider-value="5" data-slider-enabled="false"/>

<input type="text" class="ms-slider" value="" data-slider-min="10" data-slider-max="1000" data-slider-step="5" data-slider-value="[150,550]" data-slider-enabled="false" />

Vertical Slider

<input class="ms-slider" type="text" data-slider-min="0" data-slider-max="100" data-slider-step="1" data-slider-value="40" data-slider-orientation="vertical" data-slider-reversed="true" />

<input type="text" class="ms-slider" data-slider-min="0" data-slider-max="100" data-slider-step="1" data-slider-value="20" data-slider-orientation="vertical" data-slider-reversed="true" />

<input type="text" class="ms-slider" data-slider-min="0" data-slider-max="100" data-slider-step="1" data-slider-value="50" data-slider-orientation="vertical" data-slider-reversed="true" data-slider-focus="true" />

<input type="text" class="ms-slider" data-slider-min="0" data-slider-max="100" data-slider-step="1"  data-slider-orientation="vertical" data-slider-reversed="true" data-slider-handle="custom" />

Tick Marks & Labels

With All Values

With Fixed Values

Responsive Examples

With All Values

With Fixed Values

With Only Tick Values

<input type="text" class="ms-slider" data-slider-ticks="[0, 100, 200, 300, 400]" data-slider-ticks-snap-bounds="5" data-slider-value="200" data-slider-ticks-labels='["$0", "$100", "$200", "$300", "$400"]'/>

<input type="text" class="ms-slider" data-slider-ticks="[0, 1000, 2000, 3000, 4000]" data-slider-ticks-snap-bounds="100" data-slider-step="100" data-slider-value="0" data-slider-ticks-labels='["$0", "$1000", "$2000", "$3000", "$4000"]'/>

<input type="text" class="ms-slider" data-slider-ticks="[0, 100, 200, 300, 400]" data-slider-ticks-snap-bounds="5" data-slider-value="200" data-slider-ticks-labels='["$0", "$100", "$200", "$300", "$400"]'/>

<input type="text" class="ms-slider" data-slider-ticks="[0, 1000, 2000, 3000, 4000]" data-slider-ticks-snap-bounds="100" data-slider-step="100" data-slider-value="0" data-slider-ticks-labels='["$0", "$1000", "$2000", "$3000", "$4000"]'/>

<input type="text"
      data-provide="slider"
      data-slider-ticks="[1, 2, 3]"
      data-slider-ticks-labels='["short", "medium", "long"]'
      data-slider-min="1"
      data-slider-max="3"
      data-slider-step="1"
      data-slider-value="3"
      data-slider-tooltip="hide"
/>

MaterialStyle

Social Links

12
4