Menu

Slider
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

Bottom aligned labeled

A slider can display the labels below the track

Restricted Labels

You can restrict the display of labels to only the ones you want

$('.ui.slider') .slider({ restrictedLabels: [0, 10, 15, 35, 80, 90, 100], min: 0, max: 100, step: 0, autoAdjustLabels: false }) ;

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 range slider can be limited to how far the distance between the two thumbs can be


$('.ui.range.slider') .slider({ min: 5, max: 100, start: 10, end: 50, minRange: 10, maxRange: 40, step: 0 }) ;

Variations

Disabled

A slider can appear disabled

Inverted

A slider can be inverted

Reversed

A slider can be reversed

Thumb Tooltips

The slider thumbs can show a tooltip on hover containing the current value

$('.ui.slider') .slider({ showThumbTooltip: true }) ;

The tooltips can stay visible all the time and can be customized by the tooltipConfig setting.
Refer to Tooltip Variations for possible values.

$('.ui.slider') .slider({ showThumbTooltip: true, tooltipConfig: { position: 'bottom center', variation: 'small visible green' } }) ;

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, fireChange = true) Set the current slider value. Pass false to fireChange to skip the onChange and onMove callbacks
set rangeValue(fromValue, toValue, fireChange = true) Set the current range slider values. Pass false to fireChange to skip the onChange and onMove callbacks
destroy Destroys instance and removes all events

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
minRange false Makes sure that the two thumbs of a range slider always need to have a difference of the given value
maxRange false Makes sure that the two thumbs of a range slider don't exceed a difference of the given value
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; }
restrictedLabels [] An array of label values which restrict the displayed labels to only those which are defined
showThumbTooltip false Whether a tooltip should be shown to the thumb(s) on hover. Will contain the current slider value.
tooltipConfig
{ position: 'top center', variation: 'tiny black' }
Tooltip configuration used when showThumbTooltip is true
Refer to Tooltip Variations for possible values.
showLabelTicks false Show ticks on a labeled slider.
'always'will always show the ticks for all labels (even if not shown)
true will display the ticks only if the related label is also shown
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.

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