- Foundation - Home
- Foundation - Overview
- Foundation - Installation
- Foundation - Starter Projects
- Foundation - Kitchen Sink
- Foundation - Global Styles
- Foundation - Sass
- Foundation - JavaScript
- Foundation - JavaScript Utilities
- Foundation - Media Queries
- Foundation - The Grid
- Foundation - Flex Grid
- Foundation - Forms
- Foundation - Visibility Classes
- Foundation - Base Typography
- Foundation - Typography Helpers
- Foundation - Basic Controls
- Foundation - Navigation
- Foundation - Containers
- Foundation - Media
- Foundation - Plugins
- Foundation SASS
- Foundation - Sass Functions
- Foundation - Sass Mixins
- Foundation Libraries
- Foundation - Motion UI
- Foundation Useful Resources
- Foundation - Quick Guide
- Foundation - Useful Resources
- Foundation - Discussion
Foundation - Slider JavaScript Reference
Description
Foundation provides JavaScript components for the sliders.
Initializing
Along with the foundation.core.js plugin, you need to include foundation.slider.js in your JavaScript to make use of this plugin. This plugin requires the following listed utility libraries.
foundation.util.motion.js
foundation.util.triggers.js
foundation.util.keyboard.js
foundation.util.touch.js
Foundation.Slider
It is used to create a new instance of a drilldown menu.
var elem = new Foundation.Slider(element);
The following table lists the parameters used by Foundation.slider.
| Sr.No. | Name & Description | Type |
|---|---|---|
| 1 |
element jQuery object is used to make into an accordion menu. |
jQuery |
| 2 |
options Overrides the default settings of the plugin. |
Object |
Plugin Options
To customize a slider instance, Plugin options can be used. These options can be set as an object passed to the constructor of the plugin, individual data attributes or one combined data-options attribute. The following table shows how to initialize JavaScript plugins.
| Sr.No. | Name & Description | Example |
|---|---|---|
| 1 |
start Slider scale minimum value. |
0 |
| 2 |
end Slider scale maximum value. |
100 |
| 3 |
step It represents the minimum value change per change event. Not implemented currently. |
|
| 4 |
initialStart Value at which the left handle/first input must be set to on initialization. |
0 |
| 5 |
initialEnd Value at which the right handle/second input must be set to on initialization. |
100 |
| 6 |
binding It allows the input to be placed outside container and visible. |
false |
| 7 |
clickSelect It allows you to click or tap on the slider bar to choose a value. |
true |
| 8 |
vertical When set to true and use vertical class allows you to alter alignment to vertical. |
false |
| 9 |
draggable Allows you to drag slider handle(s) to choose a value. |
true |
| 10 |
disabled Prevents the event listeners from being applied and disables the slider. Crosschecked by JS with 'disabledClass'. |
false |
| 11 |
doubleSided It allows the use of two handles and cross checked by the JS. |
false |
| 12 |
decimal Represents how many decimal places the plugin must go for floating point precision. |
2 |
| 13 |
moveTime It is the time to animate the movement of a slider handle when the user clicks on the bar. If updating the transition time in Sass settings, then it needs to be manually set. |
200 |
| 14 |
disabledClass Used to disable the slider |
'disabled' |
Events
These events triggers from any element with an attached Slider plugin. The moved.zf.slider triggers when the handle movement is completed.
Functions
The .destroy is used to destroy the slider plugin.