Menu

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

Types

Slider

A standard slider


$('.ui.slider') .slider() ;

Labeled slider

A slider that show its labels

Labeled ticked slider

A slider that show its labels and ticks

Range slider

A range slider which allow you to select a range between two values


$('.ui.range.slider') .slider({ min: 5, max: 100, start: 10, end: 90, step: 5 }) ;

Variations

Disabled

A slider can appear disabled

Inverted

A slider can be inverted

Reversed

A slider can be reversed

Vertical

A slider can be vertical

Colored

A slider can be different colors

Inverted Colored

A slider can be different colors while inverted

Size

A slider can have different sizes

Examples

Step

A slider can have a custom step...


$('.ui.slider') .slider({ min: 0, max: 10, start: 4, step: 2 }) ;

...or no step at all


$('.ui.slider') .slider({ min: 0, max: 10, start: 3.82, step: 0 }) ;

Smooth slide

A slider can have a smooth slide

$('.ui.slider') .slider({ min: 0, max: 10, start: 4, step: 2 smooth: true }) ;

Initializing

Initializing a slider

Slider is initialized on pre-existing markup

$('.ui.slider') .slider() ;

Calendar

Behavior

Setting Default Description
min 0 The lowest value the slider can be
max 20 The max value the slider can be
step 1 The slider step. Set to 0 to disable step
start 0 The value the slider will start at
end 20 The second value to set in case of a range slider
labelType number The type of label to display for a labeled slider. Can be number or letter
showLabelTicks false Show ticks on a labeled slider
smooth false Define smoothness when the slider is moving
decimalPlaces 2 Number of decimals to use with an unstepped slider
pageMultiplier 2 Page up/down multiplier. Define how many more times the steps to take on page up/down press

Callbacks

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

Dimmer Message
Dimmer sub-header