Slider | JQuery UI

jQuery UI

Navigation Slider

Drag a handle to select a numeric value.

Examples

  • Default functionality
  • Colorpicker
  • Custom handle
  • Multiple sliders
  • Range slider
  • Range with fixed maximum
  • Range with fixed minimum
  • Slider bound to select
  • Snap to increments
  • Vertical range slider
  • Vertical slider

The basic slider is horizontal and has a single handle that can be moved with the mouse or by using the arrow keys.

view source
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 <!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>jQuery UI Slider - Default functionality</title> <link rel="stylesheet" href="https://code.jquery.com/ui/1.14.1/themes/base/jquery-ui.css"> <link rel="stylesheet" href="/resources/demos/style.css"> <script src="https://code.jquery.com/jquery-3.7.1.js"></script> <script src="https://code.jquery.com/ui/1.14.1/jquery-ui.js"></script> <script> $( function() { $( "#slider" ).slider(); } ); </script></head><body> <div id="slider"></div> </body></html>

Want to learn more about the slider widget? Check out the API documentation.

Interactions

  • Draggable
  • Droppable
  • Resizable
  • Selectable
  • Sortable

Widgets

  • Accordion
  • Autocomplete
  • Button
  • Checkboxradio
  • Controlgroup
  • Datepicker
  • Dialog
  • Menu
  • Progressbar
  • Selectmenu
  • Slider
  • Spinner
  • Tabs
  • Tooltip

Effects

  • Add Class
  • Color Animation
  • Easing
  • Effect
  • Hide
  • Remove Class
  • Show
  • Switch Class
  • Toggle
  • Toggle Class

Utilities

  • Position
  • Widget Factory

Từ khóa » Hslider.js