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