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
})
;
Letters
Instead of numeric values, you can show letters.
$('#lettersexample').slider({
labelType: 'letter',
max: 15
});
You may provide a different alphabetical set of letters
$('#greekletters').slider({
labelType: 'letter',
letters: 'αβγδεζηθικλμνξοπρςτυφχψω',
max: 15
});
Letters will be self repeating once the end of the letter string (or array) is reached to avoid double values. Similar to columns in a spreadsheet.
$('#repeatingletters').slider({
labelType: 'letter',
letters: 'ABC',
max: 15
});
Letter Words
By providing an array of Strings to the letters option you can predefine text to each label value
$('#letterwords').slider({
labelType: 'letter',
letters: ['Beginner', 'Advanced', 'Pro', 'Genius'],
max: 3
});
Custom interpreted labels
You can provide a function which returns a custom label according to the label value
$('#interpretedlabel')
.slider({
interpretLabel: function(value) {
// convert to hex values
return ('0000' + value.toString(16)).slice(-2).toUpperCase();
}
})
;
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
Vertical right aligned
A vertical slider can have its ticks and labels right aligned
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
})
;
Highlight Range
A slider can highlight the selected range values only
$('.ui.slider')
.slider({
highlightRange: true,
min: 0,
max: 50,
start: 5,
end: 25
})
;
UI Labels
A slider can use ui labels for its tick values
$('.ui.slider').slider({
className: {
label: 'ui tiny blue label'
},
min: 0,
max: 50
});
Autoadjust Labels
On different window sizes, a large scale slider possibly cannot show all values and will adjust the amount of labels accordingly
The autoAdjustLabels setting can be set to false to force the same scaling regardless of the viewport size.
The optional string value fixed can be used if you always want the same label distance set via the labelDistance setting. This however leads to different tick label values being shown depending on your window size.
$('.ui.slider').slider({
autoAdjustLabels: 'fixed',
min: 0,
max: 97
});
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;
}
|
| letters | ABCDEFGHIJKLMNOPQRSTUVWXYZ | String or an array of strings when labelType: 'letter' is used. Will "increase" the letters in case more labels than given letters are needed (like the columns of a spreadsheet). See Letters for examples. |
| restrictedLabels | [] | An array of label values which restrict the displayed labels to only those which are defined |
| highlightRange | false | When set, only the selected range get its label values shown with higher opacity |
| 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. When string value fixed is used, the labelDistance value will always be a fixed distance resulting in different calculated labels depending on window size. See Autoadjust Labels for an example |
| 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 |