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 trueRefer 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 |