diff --git a/documentation/examples-content/click-pips.php b/documentation/examples-content/click-pips.php new file mode 100644 index 00000000..83196301 --- /dev/null +++ b/documentation/examples-content/click-pips.php @@ -0,0 +1,28 @@ + +

Moving the slider by clicking pips

+ +
+ +
+ +

Issue #733 asks about clicking pips to move the slider to their value. noUiSlider 11 adds a data-value attribute to all .noUi-value elements that makes this easy.

+ +
+
+ + + +
+
+ +
+ +
Setup
+ +
+ +
+ + +
+
diff --git a/documentation/examples-content/colored-connect.php b/documentation/examples-content/colored-connect.php new file mode 100644 index 00000000..aea381e9 --- /dev/null +++ b/documentation/examples-content/colored-connect.php @@ -0,0 +1,28 @@ + +

Colored Connect Elements

+ +
+ +
+ +

noUiSlider's connect elements can be individually colored or otherwise styled.

+ +
+
+ + +
+
+ +
+ +
Slider setup
+ +
+ +
+ + + +
+
diff --git a/documentation/examples-content/colorpicker.php b/documentation/examples-content/colorpicker.php new file mode 100644 index 00000000..f588d624 --- /dev/null +++ b/documentation/examples-content/colorpicker.php @@ -0,0 +1,56 @@ + +

Colorpicker

+ +
+ +
+ +

We'll initialize all sliders with the same options, and use the slide callback to keep to color in sync with the slider values. This callback fires when the slider is moved by sliding, or when it is clicked or tapped.

+ +
+
+
+
+ +
+ + +
+
+ +
+ +
The HTML
+ +
+ +
<div id="colorpicker">
+	<div class="sliders" id="red"></div>
+	<div class="sliders" id="green"></div>
+	<div class="sliders" id="blue"></div>
+
+	<div class="result"></div>
+</div>
+ +
+ +
The setColor function
+ +
+ +
+ +
Initializing the slider
+ +
+ +
+ +
CSS
+ +
+ +
+ +
+
diff --git a/documentation/examples-content/dates.php b/documentation/examples-content/dates.php new file mode 100644 index 00000000..99841797 --- /dev/null +++ b/documentation/examples-content/dates.php @@ -0,0 +1,52 @@ + +

Working with dates

+ +
+ +
+ +

As all dates in JavaScript can be represented as time, noUiSlider can handle them, too. This example will show you how to convert dates to numerical ranges, and then use the update event to display them in a pretty format.

+ +

We'll be creating timestamps from strings. In order to do this easily, we'll define a new helper function. This function accepts a string, creates a new Date and then returns it as a timestamp.

+ +

In in overview below you'll find the code used to run this example. For readability, all helper functions have been moved into their own tab.

+ +
+
+ + + + + + +
+
+ +
+ +
Timestamps
+ +
+ +
+ +
Setup
+ +
+ +
+ +
Slider control
+ +
+ +
+ +
Helper functions and formatting
+ +
+

The nth function was borrowed from this StackOverflow question.

+ +
+
+
diff --git a/documentation/examples-content/hiding-tooltips.php b/documentation/examples-content/hiding-tooltips.php new file mode 100644 index 00000000..d78dcc43 --- /dev/null +++ b/documentation/examples-content/hiding-tooltips.php @@ -0,0 +1,21 @@ + +

Only showing tooltips when sliding handles

+ +
+ +
+ +

Issue #836 requested a way to toggle tooltips after slider creation. This effect can be achieved by using the .noUi-active class to show and hide the tooltips. No additional JavaScript is involved.

+ +
+
+ + +
+
+ +
+ + +
+
diff --git a/documentation/examples-content/html5.php b/documentation/examples-content/html5.php new file mode 100644 index 00000000..2fcd460c --- /dev/null +++ b/documentation/examples-content/html5.php @@ -0,0 +1,45 @@ + +

Using HTML5 input elements

+ +
+ +
+

noUiSlider's 'update' method is useful for synchronizing with other elements, such as <input> (type="number") and <select>.

+ +
+
+ + + + + +
+
+ +
+ +
Appending <option> elements
+ +
+ +
+ +
Initializing the slider
+ +
+ +
+ +
Updating the <select> and <input>
+ +
+ +
+ +
Example CSS
+ +
+ +
+
+
diff --git a/documentation/examples-content/huge-numbers.php b/documentation/examples-content/huge-numbers.php new file mode 100644 index 00000000..86bb4caf --- /dev/null +++ b/documentation/examples-content/huge-numbers.php @@ -0,0 +1,37 @@ + +

Using the slider with huge numbers

+ +
+ +
+ +

If you are working with arbitrarily large numbers, you should not use these directly in noUiSlider, as you'll run into some JavaScript limitations. Instead, you should map your values to an array.

+ +

Numbers is JavaScript are Double Precision Floats, which can store numbers up to 2^53 (9007199254740992) precisely. For reference, see this StackOverflow question, or issue #427 filed on GitHub.

+ +

As an example, see the 'range' option for a RAM selector offering 14 steps from 512MB to 8GB. The 'step' are ommited for clarity. The values are provided as bytes. A better solution would be to abstract the byte values away from the slider, looking up the byte values in an array. This keeps the slider configuration simple and prevents issues with floating point precision.

+ +

(These values fit within the limit just fine, but demonstrate the point really well!)

+ +
+
+ + + +
+
+ +
+ + + +
Setup
+ +
+ +
+ + + +
+
diff --git a/documentation/examples-content/keyboard.php b/documentation/examples-content/keyboard.php new file mode 100644 index 00000000..c67c9208 --- /dev/null +++ b/documentation/examples-content/keyboard.php @@ -0,0 +1,39 @@ + +

Adding keyboard support

+ +
+ +
+ +

Much like the keypress example, handles can be made keyboard-focusable.

+ +
+ +
+ + +
+
+ +
+ +
Initializing the slider
+ +
+ +
+ +
Listen to keypress on the handle
+ +
+ +
+ +
CSS
+ +
+ +
+ +
+
diff --git a/documentation/examples-content/keypress.php b/documentation/examples-content/keypress.php new file mode 100644 index 00000000..9755f797 --- /dev/null +++ b/documentation/examples-content/keypress.php @@ -0,0 +1,40 @@ + +

Changing the slider by keypress

+ +
+ +
+ +

To keep the library small, features like keyboard interaction haven't been included. However, adding features to input fields linked to a slider is easy. noUiSlider provides API's to help you. In this example, pressing the keyboard arrow keys will increase/decrease the slider by one step.

+ +

This example uses the 'step' API to determine by how much the slider should be changed. You don't need this function if your slider is linear. In that case, increase/decrease the value with the ammount of your step.

+ +

We'll listen to keydown on the '#input-with-keypress' element, and pass the event to a function so we can read the code that identifies the key.

+ +

Note that the slider value will be a string, so we'll need to parse it to an integer.

+ +
+
+ + + + +
+
+ +
+ +
Initializing the slider and linking the input
+ +
+ +
+ +
Listen to keypress on the input
+ +
+ +
+ +
+
diff --git a/documentation/examples-content/lock.php b/documentation/examples-content/lock.php new file mode 100644 index 00000000..5a6aad7b --- /dev/null +++ b/documentation/examples-content/lock.php @@ -0,0 +1,52 @@ + +

Locking sliders together

+ +
+ +
+ +

Two cross-updating sliders can be created using a combination of the change and slide events.

+ +
+
+ + +
+ + + + + + + + +
+
+ +
+ +
Setup and button clicks
+ +
+ +
+ +
The Crossupdate function
+ +
+ +
+ +
Initializing the sliders
+ +
+ +
+ +
Linking the sliders together
+ +
+ +
+
+
diff --git a/documentation/examples-content/non-linear.php b/documentation/examples-content/non-linear.php new file mode 100644 index 00000000..d629ec94 --- /dev/null +++ b/documentation/examples-content/non-linear.php @@ -0,0 +1,33 @@ + +

Non linear slider

+ +
+ +
+ +

One of noUiSlider's core features is the ability to divide the range in a non-linear fashion. Stepping can be applied. The example on the right shows where the handles are on the slider range in values and percentages.

+ +
+
+ + + + +
+
+ +
+ +
Setting up the slider
+ +
+ +
+ +
Read the slider value and the left offset
+ +
+ +
+
+
diff --git a/documentation/examples-content/skipping.php b/documentation/examples-content/skipping.php new file mode 100644 index 00000000..f2bb6820 --- /dev/null +++ b/documentation/examples-content/skipping.php @@ -0,0 +1,33 @@ + +

Skipping steps

+ +
+ +
+

When using a stepped slider, your configuration may require that certain steps aren't available. Using the snap feature, this effect can be created.

+

Notice how 40 and 80 can't be selected on the slider.

+ +
+
+ + + + +
+
+ +
+ +
Initialize a snapping slider
+ +
+ +
+ +
Read the slider values
+ +
+ +
+
+
diff --git a/documentation/examples-content/soft-limits.php b/documentation/examples-content/soft-limits.php new file mode 100644 index 00000000..17e2341f --- /dev/null +++ b/documentation/examples-content/soft-limits.php @@ -0,0 +1,31 @@ + +

Soft limits

+ +
+ +
+ +

If you want to disable the edges of a slider, the set event can be used to reset the value if a limit is passed. Note how the handle 'bounces back' when it is released below 20 or above 80. noUiSlider also supports disabling edges altogether, which can be done using the padding option.

+ +
+
+ + +
+
+ +
+ +
Setting up the slider
+ +
+ +
+ +
Resetting using the change event
+ +
+ +
+
+
diff --git a/documentation/examples-content/toggle.php b/documentation/examples-content/toggle.php new file mode 100644 index 00000000..4d3dda97 --- /dev/null +++ b/documentation/examples-content/toggle.php @@ -0,0 +1,33 @@ + +

Creating a toggle

+ +
+ +
+ +

Many application interfaces have options that can be turned on or off using switches. noUiSlider is well suited for this, especially because of the wide touch support.

+ +

The update event can be used to keep track of changes to the handle. We'll set the range to [0, 1], which leaves one step of 1.

+ +
+
+ +
+
+ +
+ +
Toggle
+ +
+ +
+ +
CSS
+ +
+ +
+ +
+
diff --git a/documentation/examples.php b/documentation/examples.php index d3e70b20..eb9b7f9d 100644 --- a/documentation/examples.php +++ b/documentation/examples.php @@ -22,558 +22,17 @@ - - -

Colorpicker

- -
- -
- -

We'll initialize all sliders with the same options, and use the slide callback to keep to color in sync with the slider values. This callback fires when the slider is moved by sliding, or when it is clicked or tapped.

- -
-
-
-
- -
- - -
-
- -
- -
The HTML
- -
- -
<div id="colorpicker">
-	<div class="sliders" id="red"></div>
-	<div class="sliders" id="green"></div>
-	<div class="sliders" id="blue"></div>
-
-	<div class="result"></div>
-</div>
- -
- -
The setColor function
- -
- -
- -
Initializing the slider
- -
- -
- -
CSS
- -
- -
- -
-
- - - -

Using HTML5 input elements

- -
- -
-

noUiSlider's 'update' method is useful for synchronizing with other elements, such as <input> (type="number") and <select>.

- -
-
- - - - - -
-
- -
- -
Appending <option> elements
- -
- -
- -
Initializing the slider
- -
- -
- -
Updating the <select> and <input>
- -
- -
- -
Example CSS
- -
- -
-
-
- - - -

Non linear slider

- -
- -
- -

One of noUiSlider's core features is the ability to divide the range in a non-linear fashion. Stepping can be applied. The example on the right shows where the handles are on the slider range in values and percentages.

- -
-
- - - - -
-
- -
- -
Setting up the slider
- -
- -
- -
Read the slider value and the left offset
- -
- -
-
-
- - - -

Locking sliders together

- -
- -
- -

Two cross-updating sliders can be created using a combination of the change and slide events.

- -
-
- - -
- - - - - - - - -
-
- -
- -
Setup and button clicks
- -
- -
- -
The Crossupdate function
- -
- -
- -
Initializing the sliders
- -
- -
- -
Linking the sliders together
- -
- -
-
-
- - - -

Moving the slider by clicking pips

- -
- -
- -

Issue #733 asks about clicking pips to move the slider to their value. noUiSlider 11 adds a data-value attribute to all .noUi-value elements that makes this easy.

- -
-
- - - -
-
- -
- -
Setup
- -
- -
- - -
-
- - - -

Only showing tooltips when sliding handles

- -
- -
- -

Issue #836 requested a way to toggle tooltips after slider creation. This effect can be achieved by using the .noUi-active class to show and hide the tooltips. No additional JavaScript is involved.

- -
-
- - -
-
- -
- - -
-
- - - -

Colored Connect Elements

- -
- -
- -

noUiSlider's connect elements can be individually colored or otherwise styled.

- -
-
- - -
-
- -
- -
Slider setup
- -
- -
- - - -
-
- - - -

Changing the slider by keypress

- -
- -
- -

To keep the library small, features like keyboard interaction haven't been included. However, adding features to input fields linked to a slider is easy. noUiSlider provides API's to help you. In this example, pressing the keyboard arrow keys will increase/decrease the slider by one step.

- -

This example uses the 'step' API to determine by how much the slider should be changed. You don't need this function if your slider is linear. In that case, increase/decrease the value with the ammount of your step.

- -

We'll listen to keydown on the '#input-with-keypress' element, and pass the event to a function so we can read the code that identifies the key.

- -

Note that the slider value will be a string, so we'll need to parse it to an integer.

- -
-
- - - - -
-
- -
- -
Initializing the slider and linking the input
- -
- -
- -
Listen to keypress on the input
- -
- -
- -
-
- - - -

Skipping steps

- -
- -
-

When using a stepped slider, your configuration may require that certain steps aren't available. Using the snap feature, this effect can be created.

-

Notice how 40 and 80 can't be selected on the slider.

- -
-
- - - - -
-
- -
- -
Initialize a snapping slider
- -
- -
- -
Read the slider values
- -
- -
-
-
- - - -

Using the slider with huge numbers

- -
- -
- -

If you are working with arbitrarily large numbers, you should not use these directly in noUiSlider, as you'll run into some JavaScript limitations. Instead, you should map your values to an array.

- -

Numbers is JavaScript are Double Precision Floats, which can store numbers up to 2^53 (9007199254740992) precisely. For reference, see this StackOverflow question, or issue #427 filed on GitHub.

- -

As an example, see the 'range' option for a RAM selector offering 14 steps from 512MB to 8GB. The 'step' are ommited for clarity. The values are provided as bytes. A better solution would be to abstract the byte values away from the slider, looking up the byte values in an array. This keeps the slider configuration simple and prevents issues with floating point precision.

- -

(These values fit within the limit just fine, but demonstrate the point really well!)

- -
-
- - - -
-
- -
- - - -
Setup
- -
- -
- - - -
-
- - - -

Adding keyboard support

- -
- -
- -

Much like the keypress example, handles can be made keyboard-focusable.

- -
- -
- - -
-
- -
- -
Initializing the slider
- -
- -
- -
Listen to keypress on the handle
- -
- -
- -
CSS
- -
- -
- -
-
- - - -

Working with dates

- -
- -
- -

As all dates in JavaScript can be represented as time, noUiSlider can handle them, too. This example will show you how to convert dates to numerical ranges, and then use the update event to display them in a pretty format.

- -

We'll be creating timestamps from strings. In order to do this easily, we'll define a new helper function. This function accepts a string, creates a new Date and then returns it as a timestamp.

- -

In in overview below you'll find the code used to run this example. For readability, all helper functions have been moved into their own tab.

- -
-
- - - - - - -
-
- -
- -
Timestamps
- -
- -
- -
Setup
- -
- -
- -
Slider control
- -
- -
- -
Helper functions and formatting
- -
-

The nth function was borrowed from this StackOverflow question.

- -
-
-
- - - -

Creating a toggle

- -
- -
- -

Many application interfaces have options that can be turned on or off using switches. noUiSlider is well suited for this, especially because of the wide touch support.

- -

The update event can be used to keep track of changes to the handle. We'll set the range to [0, 1], which leaves one step of 1.

- -
-
- -
-
- -
- -
Toggle
- -
- -
- -
CSS
- -
- -
- -
-
- - - -

Soft limits

- -
- -
- -

If you want to disable the edges of a slider, the set event can be used to reset the value if a limit is passed. Note how the handle 'bounces back' when it is released below 20 or above 80. noUiSlider also supports disabling edges altogether, which can be done using the padding option.

- -
-
- - -
-
- -
- -
Setting up the slider
- -
- -
- -
Resetting using the change event
- -
- -
-
-
+ + + + + + + + + + + + + +