基金會 - 滑塊資料繫結

描述

可使用此功能顯示一個可見輸入和一個滑塊，以便更改其中一個將匹配另一個。為 input 分配 id 並新增 aria-controls = "idOfInput"。

示例

以下示例演示如何在 Foundation 中使用 slider data binding。

<html>
   <head>
      <title>Slider Data Binding</title>
      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites@6.5.1/dist/css/foundation.min.css" crossorigin="anonymous">

      <!-- 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/foundation-sites@6.5.1/dist/js/foundation.min.js" crossorigin="anonymous"></script>

   </head>

   <body>
      <div class = "small-10 columns">
         <div class = "slider" data-slider data-initial-start = "30">
            <span class = "slider-handle"  data-slider-handle role = "slider" tabindex = "1" aria-controls = "sliderOutput"></span>
            <span class = "slider-fill" data-slider-fill></span>
         </div>
      </div>

      <div class = "small-2 columns">
         <input type = "number" id = "sliderOutput">
      </div>

      
      <script>
         $(document).ready(function() {
            $(document).foundation();
         })
      </script>
   </body>
</html>

輸出

讓我們執行以下步驟，瞭解上面給出的程式碼如何工作 -

將上面給出的 html 程式碼儲存在 slider_data_binding.html 檔案中。
在此瀏覽器中開啟此 HTML 檔案，輸出顯示如下。

foundation_basic_controls.htm

列印頁面

上一個

下一個