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.

foundation_basic_controls.htm
Advertisements