Slider html css jquery

Slider Widget

Description: Drag a handle to select a numeric value.

QuickNavExamples

Options

Methods

Events

The jQuery UI Slider plugin makes selected elements into sliders. There are various options such as multiple handles and ranges. The handle can be moved with the mouse or the arrow keys.

The slider widget will create handle elements with the class ui-slider-handle on initialization. You can specify custom handle elements by creating and appending the elements and adding the ui-slider-handle class before initialization. It will only create the number of handles needed to match the length of value / values . For example, if you specify values: [ 1, 5, 18 ] and create one custom handle, the plugin will create the other two.

Theming

The slider widget uses the jQuery UI CSS framework to style its look and feel. If slider specific styling is needed, the following CSS class names can be used for overrides or as keys for the classes option:

• ui-slider : The track of the slider control. This element will additionally have a class name of ui-slider-horizontal or ui-slider-vertical depending on the orientation option of the slider.
  • ui-slider-handle : One of the slider handles.
  • ui-slider-range : The selected range used when the range option is set. This element can additionally have a class of ui-slider-range-min or ui-slider-range-max if the range option is set to «min» or «max» respectively.

  Dependencies

  Additional Notes:

  • This widget requires some functional CSS, otherwise it won’t work. If you build a custom theme, use the widget’s specific CSS file as a starting point.

  Options

  animate

  Whether to slide the handle smoothly when the user clicks on the slider track. Also accepts any valid animation duration.

  • Boolean: When set to true , the handle will animate with the default duration.
  • String: The name of a speed, such as «fast» or «slow» .
  • Number: The duration of the animation, in milliseconds.

  Initialize the slider with the animate option specified:

  $( ".selector" ).slider(
   animate: "fast"
  >);

  Get or set the animate option, after initialization:

  // Getter
  var animate = $( ".selector" ).slider( "option", "animate" );
   
  // Setter
  $( ".selector" ).slider( "option", "animate", "fast" );

  classes

   "ui-slider": "ui-corner-all",
   "ui-slider-handle": "ui-corner-all",
   "ui-slider-range": "ui-corner-all ui-widget-header"
  >

  Specify additional classes to add to the widget's elements. Any of classes specified in the Theming section can be used as keys to override their value. To learn more about this option, check out the learn article about the classes option.

  Initialize the slider with the classes option specified, changing the theming for the ui-slider class:

  $( ".selector" ).slider(
   classes: 
   "ui-slider": "highlight"
   >
  >);

  Get or set a property of the classes option, after initialization, here reading and changing the theming for the ui-slider class:

  // Getter
  var themeClass = $( ".selector" ).slider( "option", "classes.ui-slider" );
   
  // Setter
  $( ".selector" ).slider( "option", "classes.ui-slider", "highlight" );

  disabled

  Initialize the slider with the disabled option specified:

  $( ".selector" ).slider(
   disabled: true
  >);

  Get or set the disabled option, after initialization:

  // Getter
  var disabled = $( ".selector" ).slider( "option", "disabled" );
   
  // Setter
  $( ".selector" ).slider( "option", "disabled", true );

  max

  Initialize the slider with the max option specified:

  Get or set the max option, after initialization:

  // Getter
  var max = $( ".selector" ).slider( "option", "max" );
   
  // Setter
  $( ".selector" ).slider( "option", "max", 50 );

  min

  Initialize the slider with the min option specified:

  Get or set the min option, after initialization:

  // Getter
  var min = $( ".selector" ).slider( "option", "min" );
   
  // Setter
  $( ".selector" ).slider( "option", "min", 10 );

  orientation

  Determines whether the slider handles move horizontally (min on left, max on right) or vertically (min on bottom, max on top). Possible values: "horizontal" , "vertical" .

  Initialize the slider with the orientation option specified:

  $( ".selector" ).slider(
   orientation: "vertical"
  >);

  Get or set the orientation option, after initialization:

  // Getter
  var orientation = $( ".selector" ).slider( "option", "orientation" );
   
  // Setter
  $( ".selector" ).slider( "option", "orientation", "vertical" );

  range

  • Boolean: If set to true , the slider will detect if you have two handles and create a styleable range element between these two.
  • String: Either "min" or "max" . A min range goes from the slider min to one handle. A max range goes from one handle to the slider max.

  Initialize the slider with the range option specified:

  $( ".selector" ).slider(
   range: true
  >);

  Get or set the range option, after initialization:

  // Getter
  var range = $( ".selector" ).slider( "option", "range" );
   
  // Setter
  $( ".selector" ).slider( "option", "range", true );

  step

  Determines the size or amount of each interval or step the slider takes between the min and max. The full specified value range of the slider (max - min) should be evenly divisible by the step.

  Initialize the slider with the step option specified:

  Get or set the step option, after initialization:

  // Getter
  var step = $( ".selector" ).slider( "option", "step" );
   
  // Setter
  $( ".selector" ).slider( "option", "step", 5 );

  value

  Determines the value of the slider, if there's only one handle. If there is more than one handle, determines the value of the first handle.

  Initialize the slider with the value option specified:

  Get or set the value option, after initialization:

  // Getter
  var value = $( ".selector" ).slider( "option", "value" );
   
  // Setter
  $( ".selector" ).slider( "option", "value", 10 );

  values

  This option can be used to specify multiple handles. If the range option is set to true , the length of values should be 2.

  Initialize the slider with the values option specified:

  $( ".selector" ).slider(
   values: [ 10, 25 ]
  >);

  Get or set the values option, after initialization:

  // Getter
  var values = $( ".selector" ).slider( "option", "values" );
   
  // Setter
  $( ".selector" ).slider( "option", "values", [ 10, 25 ] );

  Methods

  destroy() Returns: jQuery (plugin only)

  Removes the slider functionality completely. This will return the element back to its pre-init state.

  Invoke the destroy method:

  Источник

  Slider

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

  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="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
   link rel="stylesheet" href="/resources/demos/style.css">
   script src="https://code.jquery.com/jquery-3.6.0.js"> script>
   script src="https://code.jquery.com/ui/1.13.2/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

  Widgets

  Effects

  Utilities

  Books

  Copyright 2023 OpenJS Foundation and jQuery contributors. All rights reserved. See jQuery License for more information. The OpenJS Foundation has registered trademarks and uses trademarks. For a list of trademarks of the OpenJS Foundation, please see our Trademark Policy and Trademark List. Trademarks and logos not indicated on the list of OpenJS Foundation trademarks are trademarks™ or registered® trademarks of their respective holders. Use of them does not imply any affiliation with or endorsement by them. OpenJS Foundation Terms of Use, Privacy, and Cookie Policies also apply. Web hosting by Digital Ocean | CDN by StackPath

  Источник

  101 CSS Sliders

  Collection of free HTML and CSS slider code examples: card, comparison, fullscreen, responsive, simple, etc. Update of May 2020 collection. 5 new items.

  Table of Contents

  Related Articles

  Card Sliders

  Author

  Links

  Made with

  About the code

  Onboarding Screens

  A set of onboarding screens in HTML/CSS/JS. A personal experiment with layering PNG icons, CSS3 transitions, & flexbox.

  

  Information Card Slider

  HTML, CSS and JavaScript information card slider.
  Made by Andy Tran
  November 23, 2015

  

  Elastic Slider

  Photo slider working on desktop and mobile browsers.
  Made by Taron
  September 29, 2014

  Comparison (Before/After) Sliders

  

  Author

  Links

  Made with

  About the code

  Image Comparison Slider

  A simple and clean image comparison slider, fully responsive and touch ready made with CSS and jQuery.

  

  Author

  Links

  Made with

  About the code

  Javascriptless Before/After Slider

  A before and after slider with only html and css.

  

  Author

  Links

  Made with

  About the code

  Before After 3 Layer Image Slider

  Playing around with a new idea using my two layer before/after image slider. Keeping it minimal. Keeping it vanilla. Like it if it's useful 🙂

  

  Before After Image Slider (Vanilla JS)

  Vanilla JS, minimal, nice to look.
  Made by Huw
  July 3, 2017

  

  Author

  Links

  Made with

  About the code

  Split Screen UI

  A "split-screen" slider element with JavaScript.

  

  Before & After Slider Gallery With SVG Masks

  A little experiment for a before & after slider all inside a SVG. Masking makes it pretty simple. Since it's all SVG, the images and captions scale nicely together. GreenSock's Draggable and ThrowProps plugins were used for the slider control.
  Made by Craig Roblewsky
  April 17, 2017

  

  HTML5 Before & After Comparison Slider

  Uses customised range input for slider.
  Made by Dudley Storey
  October 14, 2016

  

  Responsive Image Comparison Slider

  Responsive image comparison slider with HTML, CSS and JavaScript.
  Made by Ege Görgülü
  August 3, 2016

  

  HTML5 Video Before-and-After Comparison Slider

  HTML5, CSS3 and JavaScript video before-and-after comparison slider.
  Made by Dudley Storey
  April 24, 2016

  

  Image Comparison Slider

  A handy draggable slider to quickly compare 2 images, powered by CSS3 and jQuery.
  Made by CodyHouse
  September 15, 2014

  Fullscreen Sliders

  Author

  Links

  Made with

  About a code

  Pure CSS ECommerce Slider

  Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

  Author

  Links

  Made with

  About the code

  Pure CSS Slider

  Simple slider based on radio inputs. 100% pure HTML + CSS. Works also with arrow keys.

  Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

  

  Author

  Links

  Made with

  About the code

  Slider Transition

  Nice transition effect for fullscreen slider.

  

  Author

  Links

  Made with

  About the code

  Horizontal Parallax Sliding Slider

  Horizontal parallax sliding slider with Swiper.js.

  

  Author

  Links

  Made with

  About the code

  Smooth 3D Perspective Slider

  Responsive smooth 3D perspective slider on mouse move.

  

  Fullscreen Hero Image Slider

  Fullscreen hero image slider (swipe panels theme) with HTML, CSS and JavaScript.
  Made by Tobias Bogliolo
  June 25, 2017

  

  Velo.js Slider With Borders

  A slider interaction thing using Velocity and Velocity effects (UI Pack) to enhance the animation. Animation is triggered via arrow keys, nav click, or scrolling jack. This version includes borders as part of the interaction.
  Made by Stephen Scaff
  May 11, 2017

  

  Popout Slider

  Simple slider in a minimal style to show off images. Part of the image pops out on each slide.
  Made by Nathan Taylor
  Jannuary 22, 2017

  

  Responsive Parallax Drag-slider With Transparent Letters

  The thing is pretty easy customizable. You can safely change font, font size, font color, animation speed. The first letter of a new string in array in JS will appear on a new slide. Easy to create (or delete) a new slide: 1. Add new city in the array in JS. 2. Change number of slides variable and put a new image in scss list in CSS.
  Made by Ruslan Pivovarov
  October 8, 2016

  

  Fancy Slider

  1. Clip-path for image masking rectangle border (webkit only).
  2. Blend-mode for this mask.
  3. Smart color system, just put your color name and value into sass map and then add proper class with this color name to elements and everything will work!
  4. Cool credits side-menu (click small button in the center of demo).
  5. Vanilla js with just

  Author

  Источник