有没有简单的JavaScript滑块?

阅读时长 4 分钟读完

有没有简单的JavaScript滑块?

在前端开发中,滑块是一个相当常见的UI组件。它可以让用户通过滑动来选择一个数值范围,从而实现一些交互效果。事实上,在JavaScript中创建一个简单的滑块也并不难。

HTML

首先,我们需要一个HTML元素作为滑块的容器,以及两个用于显示当前数值的<span>元素。代码如下:

其中,<div>元素为滑块的主体部分,<div id="knob">则为滑块的拖动按钮。而<span>元素则用于显示当前选中的数值。

CSS

接下来,我们需要对滑块进行样式设置。这里我们使用CSS来实现。

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

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

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

以上代码中,我们给滑块和滑块按钮分别设定了样式,同时还设置了数值显示框的样式。

JavaScript

最后,我们来实现滑块的拖动功能。具体思路是:当鼠标按下时,监听鼠标移动事件,根据鼠标的位置计算出滑块按钮应该移动到的位置;当鼠标抬起时,取消鼠标移动事件的监听。

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

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

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

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

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

在以上代码中,我们声明了三个变量:knob代表滑块按钮,slider代表滑块容器,value代表数值显示框。我们还声明了一个dragging标志位,用于判断当前是否正在拖拽滑块。

当用户按下滑块按钮时,我们将dragging设置为true。此后,我们监听整个文档的鼠标移动事件。如果draggingtrue,则说明用户正在拖拽滑块,这时我们计算出滑块应该移动到的位置,并将其设置在knob.style.left属性中。

同时,我们还需要根据滑块的位置计算出当前选中的数值,并将其显示在value元素中。

当用户抬起鼠标时,我们将dragging设置为false,以取消对鼠标移动事件的监听。

示例代码

最终,我们可以将以上三段代码组合起来,得到完整的示例代码如下:

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

- ----------------------------------------------------------- --------
----------------------------------------------------------------------------------
纠错
反馈