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() ;

Behaviors

Behaviors are short english phrases used for accessing specific functionality in

Behaviors are accessible with Javascript using the syntax:

$('.ui.slider').slider('behavior', argumentOne, argumentTwo...);
get value Get the current selected value
get thumbValue(which) Get the selected value of one of the range thumbs. Provide either first or second as a string parameter
get numLabels Get the number of rendered label ticks
set value(value) Set the current slider value
set rangeValue(fromValue, toValue) Set the current range slider values

Slider

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
autoAdjustLabels true Whether labels should auto adjust on window resize
labelDistance 100 The distance between labels
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