Range Slider
Judia Builder
Choose your themes & layouts etc.
Select Layouts
Choose your layout.
Vertical
Horizontal
Color Scheme
Choose Light or Dark Scheme.
Light
Dark
Brand
Card Layout
Choose borderless or border layout.
Borderless
Border
Layout Width
Choose Fluid or Boxed layout.
Fluid
Boxed
Layout Position
Choose Fixed or Scrollable Layout Position.
Topbar Color
Choose Light, Dark or Brand Topbar Color.
Light
Dark
Brand
Topbar Images
Choose Topbar Images.
Bootstrap Range
Default Range
Use type="range" attribute and form-range class to create a default 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.
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.