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



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

Custom interpreted labels

You can provide a function which returns a custom label according to the label value

var labels = ["α", "β", "γ", "δ", "ε", "ζ", "η", "θ", "ι", "κ", "λ", "μ", "ν", "ξ", "ο", "π", "ρ", "σ/ς", "τ", "υ", "φ", "χ", "ψ", "ω"]; $('#interpretedlabel') .slider({ interpretLabel: function(value) { return labels[value]; } }) ;

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



A slider can appear disabled


A slider can be inverted


A slider can be reversed


A slider can be vertical


A slider can be different colors

Inverted Colored

A slider can be different colors while inverted


A slider can have different sizes



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 a slider

Slider is initialized on pre-existing markup

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


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



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
interpretLabel false You can specify a function here which consumes the current label value as parameter and should return a custom label text according to the given value
interpretLabel: function(value){ //do something with 'value' and return matching text return myCustomText; }
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
preventCrossover true Prevents the lower thumb to crossover the thumb handle.


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