-This example shows how easy it is to put together three sliders to make a simple RGB colorpicker. -
+Combine three sliders to create a simple RGB colorpicker.
-The default slider has a single handle and is horizontal. The handle can be moved with the mouse or by using the arrow keys. -
+The basic slider is horizontal and has a single handle that can be moved with the mouse or by using the arrow keys.
-This example shows how easy it is to add multiple sliders to a page, each with their own options, to make a UI for a music player. -
+Combine horizontal and vertical sliders, each with their own options, to create the UI for a music player.
-Example of a range slider that had two drag handles and a filled bar that connects the two handles to indicate that the values between them are selected. -This is created by setting the range option: -
- -range: true
-Set the range option to true to capture a range of values with two drag handles. The space between the handles is filled with a different background color to indicate those values are selected.
-This is an example of a vertical range slider created by setting the orientation to vertical: -
- -orientation: "vertical",
-range: true,
-values: [17, 67]
-
-It's important to note that a vertical slider needs a height set.
-You can do this via .height() or by setting the height through CSS.
-
-This demo also shows how the current slider value can be used to populate a standard form input that can also be used for user feedback. -
+Change the orientation of the range slider to vertical. Assign a height value via .height() or by setting the height through CSS, and set the orientation option to "vertical."
-An example of a range slider that has the filled bar hard-coded to the maximum value plus a single slider. -This makes it clear that selecting a value will also include all values above the selection. -This is a range option type: -
- -range: "max"
--This demo also shows how the current slider value can be used to populate a standard form input that can also be used for user feedback. -
+Fix the maximum value of the range slider so that the user can only select a minimum. Set the range option to "max."
-An example of a range slider that has the filled bar hard-coded to the minimum value plus a single slider. -This makes it clear that selecting a value will also include all values below the selection. -This is a range option type: -
- -range: "min"
--This demo also shows how the current slider value can be used to populate a standard form input that can also be used for user feedback. -
+Fix the minimum value of the range slider so that the user can only select a maximum. Set the range option to "min."
-Example of how a slider can be used to manipulate the positioning of content on the page. In this case, it acts as a scrollbar. -
+Use a slider to manipulate the positioning of content on the page. In this case, it acts as a scrollbar with the potential to capture values if needed.
-This is an example of a minimum range vertical slider created by setting the orientation to vertical: -
- -orientation: "vertical"
-
-It's important to note that a vertical slider needs a height set.
-You can do this via .height() or by setting the height through CSS.
-
-This demo also shows how the current slider value can be used to populate a standard form input that can also be used for user feedback. -
+Change the orientation of the slider to vertical. Assign a height value via .height() or by setting the height through CSS, and set the orientation option to "vertical."
-This slider has a step value set that will only allow for increments of 50 to be selected. -The default step increment is 1. -The drag handle will snap to drop points every 50 units. -This is set in an option called step: -
- -min: 0,
-max: 500,
-step: 50
--This demo also shows how the current slider value can be used to populate a standard form input that can also be used for user feedback. -
+Increment slider values with the step option set to an integer, commonly a dividend of the slider's maximum value. The default increment is 1.