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
Label at the bottom
A slider can display the labels below the track
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
})
;
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, 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 |
| 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. |
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 |