滑块是一种功能，可在滑动旋钮或任何按钮时反映动作。您可以在定义元素，处理程序，选项和回调事件时创建自己的滑块。让我们讨论更多有关滑块的信息。

创建一个新的滑块

我们首先必须为滑块选择合适的HTML元素。考虑基本概念时，div元素最适合滑块，因为使用div可以创建子元素。现在，我们必须为这些div设置CSS，以使div结构成为理想的滑块。在此，父div用于滑块，子div用于旋钮。

现在，我们必须将这些div用作滑块，方法是将元素作为liderObject和toggleObject传递给Slider构造函数。看一下以下用于定义滑块的语法。

句法

var SliderObject = new Slider(sliderObject , knobObject , [,options,],..);

我们还必须定义滑块选项。

滑块选项

让我们讨论一些用于滑块的选项。

捕捉

捕捉值可以是true或false值。这确定了当沿滑块拖动旋钮时，旋钮是否捕捉到台阶。默认情况下为false。

抵消

这是旋钮相对于起始位置的相对偏移。尝试尝试这一方法。默认情况下为0。

范围

这是一个非常有用的选项。您可以设置步骤将要进入的数字范围。例如，如果您的范围是[0，200]，并且您有10个步骤，则您的步骤将相隔20个。该范围还可以包含负数，例如[-10，0]，这在反转滚动时非常有用。默认情况下为false。

轮

将wheel设置为true，然后滚动器将识别mousewheel事件。使用鼠标滚轮时，您可能必须调整范围，以确保鼠标滚轮事件不会倒转（再次，稍后再介绍）。

脚步

默认的100个步骤非常有用，因为它很容易用作百分比。但是，您可以在合理范围内设置尽可能多的步骤（可用的）。默认情况下为100。

模式

模式将定义滑块将其自身注册为垂直还是水平。但是，还有一些其他必要的步骤可以从水平和垂直转换。默认情况下，它是水平的。

回调事件

滑块提供了三个重要的回调事件。

onChange

当前步骤中的任何更改都会触发事件的执行。查看下面给出的示例以查看其执行时间。

onTick

手柄位置的任何更改都会触发此事件的执行。查看下面给出的示例以查看其执行的过程。

onComplete

释放该句柄时，将执行此事件。查看下面给出的示例以查看其执行时间。

例

下面的示例说明了水平和垂直滑块以及事件指示器。看一下下面的代码。

      
      
      
      
      
   
   
   
      

         

      



      
      

         

      


      
       

      
      

         onChange

         Passes the step you are on: 
      
      
      

         onComplete

         passes the current step: 
      
      
   

输出

单击水平或垂直滑块上的棕色旋钮，然后将其拖动，即可找到每个动作的步骤位置和事件指示。