基础 CSS 滑块基础知识

代码目录

Foundation CSS Slider Basics
HTML实现
HTML实现

Foundation CSS Slider Basics

Foundation CSS 是 CSS 的前端框架，用于构建可在任何设备上完美运行的响应式网站、应用和电子邮件。它使用 HTML、CSS 和 Javascript 编写，并被许多著名公司使用，如 Amazon、Facebook、eBay 等。它使用 Grunt 和 Libsass 等包进行快速编码和控制，并使用 Saas 编译器加快开发速度。

Slider 用于指定当我们向上/向下或向左/向右拖动滑块时的范围。我们可以通过拖动滑块的手柄来设置滑块上的任何值。我们也可以在拖动滑块时显示滑块值。在本文中，我们将了解 Slider 基础知识。

基础 CSS 滑块基础类：

滑块：用于创建滑块。
slider-handle：用于创建用于拖动的滑块句柄。
slider-fill：显示滑块的填充量。

语法：

<div class="slider" data-slider>

    <span class="slider-handle"

          data-slider-handle role="slider"

          tabindex="1">

    </span>

    <span class="slider-fill"

          data-slider-fill>

    </span>

    <input type="hidden">

</div>

示例 1：以下代码演示了一个基本滑块。

HTML实现

<!DOCTYPE html>

<html>

  <head>

    <!-- Compressed CSS -->

    <link rel="stylesheet" href=

" https://cdn.jsdelivr.net/npm/[email protected]/dist/css/foundation.min.css" />

    <!-- Compressed JavaScript -->

    <script src=

" https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js">

    </script>

    <script src=

" https://cdn.jsdelivr.net/npm/[email protected]/dist/js/foundation.min.js">

    </script>

</head>

  <body>

    <center>

        <h1 style="color: green">GeeksforGeeks</h1>

        <h3>Foundation CSS Slider Basics</h3>

          <div class="slider"              data-slider data-initial-start="1"

             data-end="50">

            <span class="slider-handle"

                  data-slider-handle 

                  role="slider"

                  tabindex="1">

            </span>

            <span class="slider-fill"

                  data-slider-fill>

            </span>

        </div>

    </center>

      <script>

        $(document).ready(function () {

            $(document).foundation();

        });

    </script>

</body>

  </html>

输出：

示例 2：以下代码演示了带有滑块值的滑块。

HTML实现

<!DOCTYPE html>

<html>

  <head>

    <!-- Compressed CSS -->

    <link rel="stylesheet" href=

" https://cdn.jsdelivr.net/npm/[email protected]/dist/css/foundation.min.css" />

    <!-- Compressed JavaScript -->

    <script src=

" https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js">

    </script>

    <script src=

" https://cdn.jsdelivr.net/npm/[email protected]/dist/js/foundation.min.js">

    </script>

</head>

  <body>

    <center>

        <h1 style="color: green">GeeksforGeeks</h1>

        <h3>Foundation CSS Slider Basics</h3>

          <div class="slider"

             data-slider 

             data-initial-start="10"

             data-end="100">

            <span class="slider-handle"                   data-slider-handle 

                  role="slider"                   tabindex="1">

            </span>

            <span class="slider-fill"

                  data-slider-fill>

            </span>

            <input type="number">

        </div>

        <br>

        <div class="slider"              data-slider

             data-initial-start="35"

             data-end="200">

            <span class="slider-handle"

                  data-slider-handle

                  role="slider"                   tabindex="1">

            </span>

            <span class="slider-fill"                   data-slider-fill>

            </span>

            <input type="number">

        </div>

    </center>

      <script>

        $(document).ready(function () {

            $(document).foundation();

        });

    </script>

</body>

  </html>

输出：

参考： https:// /get.foundation/sites/docs/slider.html#basics

注：本文由VeryToolz翻译自 Foundation CSS Slider Basics ，非经特殊声明，文中代码和图片版权归原作者 harendra4373所有，本译文的传播和使用请遵循“署名-相同方式共享 4.0 国际 (CC BY-SA 4.0)”协议。