Menu

Range BETA
A range slider allows users to select values within a range

Download

Types

Range

A standard range slider


$('.ui.range') .range() ;

Variations

Disabled

A range slider can appear disabled

Inverted

A range slider can be inverted

Colored

A range slider can be different colors

Inverted Colored

A range slider can be different colors while inverted

Examples

Step

A range can have a custom step


Initializing

Initializing a range slider

Range is initialized on pre-existing markup

$('.ui.range') .range() ;

Calendar

Behavior

Setting Default Description
min 0 The lowest value the slider can be
max false The max value the slider can be
step 1 The slider step
start 0 The value the slider will start at
input false jQuery selector for the input to set the slider value of

Callbacks

Callback Context Description
onChange active content Is called when the slider value is changed

Dimmer Message
Dimmer sub-header