Range Slider | Velzon - Admin & Dashboard Template

#### Are you sure ?

Are you sure you want to remove this Notification ?

#### Range Slider

#### Bootstrap Range

Show Code

##### Default Range

Use `type="range"` attribute and `form-range` class to create a deafult range.

##### Disabled

Use `disabled` attribute on an input to give it a grayed out appearance and remove pointer events.

##### Min and Max

Use `min` and `max` attribute with specified range input respectively.

##### Steps

By default, range inputs “snap” to integer values. To change this, you can specify a step value. In the example below, we double the number of steps by using `step="0.5"` attribute.

    <!-- Default Range -->
    <input type="range" class="form-range" id="customRange1">

    <!-- Disabled Range -->
    <input type="range" class="form-range" id="disabledRange" disabled>

    <!-- Min and Max -->
    <input type="range" class="form-range" min="0" max="5" id="customRange2">

    <!-- Steps -->
    <input type="range" class="form-range" min="0" max="5" step="0.5" id="customRange3">

#### Nouislider

noUiSlider is a lightweight JavaScript range slider

##### Basic Example

##### Multi elements range handle

##### Colorpicker

##### Using HTML5 Input Elements

##### Non linear slider

##### Locking sliders together

##### Merging overlapping tooltips

##### Only showing tooltips when sliding handle

##### Moving the slider by clicking pips

##### Colored Connect Elements

##### Creating a toggle

##### Soft limits

#### Color Scheme

##### Primary

Use `data-slider-color="primary"` attribute to set primary color scheme.

##### Secondary

Use `data-slider-color="secondary"` attribute to set secondary color scheme.

##### Success

Use `data-slider-color="success"` attribute to set success color scheme.

##### Info

Use `data-slider-color="info"` attribute to set info color scheme.

##### Warning

Use `data-slider-color="warning"` attribute to set warning color scheme.

##### Danger

Use `data-slider-color="danger"` attribute to set danger color scheme.

##### Dark

Use `data-slider-color="dark"` attribute to set dark color scheme.

#### Sizes

##### Large

Use `data-slider-size="lg"` attribute to set large size rangeslider.

##### Medium

Use `data-slider-size="md"` attribute to set medium size data-rangeslider.

##### Small

Use `data-slider-size="sm"` attribute to set small size rangeslider.

#### Styling

##### Line Rangeslider

Use `data-slider-style="line"` attribute to set line rangeslider.

##### Circle Bordered Rangeslider

Use `data-slider-style="border"` attribute to set circle bordered rangeslider.

##### Square Rangeslider

Use `data-slider-style="square"` attribute to set square shape rangeslider.

Loading...

##### Theme Customizer

###### Layout

Choose your layout

##### Vertical

##### Horizontal

##### Two Column

##### Semi Box

###### Color Scheme

Choose Light or Dark Scheme.

##### Light

##### Dark

###### Layout Width

Choose Fluid or Boxed layout.

##### Fluid

##### Boxed

###### Layout Position

Choose Fixed or Scrollable Layout Position.

Fixed Scrollable

###### Topbar Color

Choose Light or Dark Topbar Color.

##### Light

##### Dark

###### Background Image

Choose a body background image.

##### None

##### One

##### Two

##### Three