您需要了解的關於 HTML5 滑塊元素的內容

HTML5 帶來了很多新標籤和關於如何使用舊標籤的新規則。其中之一是范圍輸入元素或滑塊。這種控件在操作系統中已經存在了幾十年，但直到現在它才進入瀏覽器。

這種延遲的原因可能是單獨使用 JavaScript 很容易模擬該功能。 jQuery UI 庫包含一個功能強大的版本，也很容易設置樣式。但是將它內置到瀏覽器中並準備就緒會方便得多，至少對於支持它的瀏覽器而言。

瀏覽器支持

所有現代瀏覽器都支持這個元素，除了 Firefox，但它可以很容易地用 html5slider.js 重新創建。當然 IE 也不支持範圍輸入（這並不奇怪），對此沒有簡單的修復。這意味著要跨瀏覽器使用它，您仍然需要包含一個單獨的啟用庫，如 jQuery UI（稍後會詳細介紹）。好在即使瀏覽器不支持range元素，也會回退到文本框。

工作原理

我將滑塊稱為“範圍輸入”是有原因的。它是一種輸入元素，而不是單獨的標籤 - <input type="range" /> 是您在頁面中顯示它所需的全部內容。它支持常規的 value 所有輸入元素共享的屬性，以及 min 和 最大 , 限制範圍和 step 它設置每次移動時值的變化量（默認為 1）。

您可以使用 JavaScript/jQuery 更改這些屬性，就像使用任何常規輸入元素一樣。您還可以使用 onchange 事件來監聽更改。代碼是這樣的：

從 index.html 中提取

<input id="defaultSlider" type="range" min="0" max="500" />
<p class="note">Current value: <span id="currentValue">0</span></p>

這是監聽 change 事件的 jQuery 代碼：

assets/js/slider-default.js

$(function(){

    var currentValue = $('#currentValue');

    $('#defaultSlider').change(function(){
        currentValue.html(this.value);
    });

    // Trigger the event on load, so
    // the value field is populated:

    $('#defaultSlider').change();

});

當然，此代碼僅在您的瀏覽器支持滑塊元素時才有效。否則你會看到一個文本框。

讓場地平整

由於超過三分之二的互聯網人口將無法看到我們漂亮的滑塊，我們需要採取不同的方式。讓我們使用 jQuery UI 構建一個快速而骯髒的滑塊版本，jQuery UI 是一個位於 jQuery 之上的界面組件庫。

從slider-jqueryui.html中提取

<div id="slider"></div>
<p class="note">Current value: <span id="currentValue">0</span></p>

您可以在下面看到 jQuery UI Slider 控件的代碼（您需要在頁面中包含 jQuery UI 和 jQuery）。

assets/js/slider-jqueryui.js

$(function(){

    var currentValue = $('#currentValue');

    $("#slider").slider({ 
        max: 500,
        min: 0,
        slide: function(event, ui) {
            currentValue.html(ui.value);
        }
    });

});

代碼非常簡單。它只是使用滑塊方法，其餘的由庫完成。

有趣的部分

這裡有一個實現——因為我們已經展示了我們自己的自定義版本的滑塊，我們也可以展示一個完全不同的控件。讓我們使用上週的 KnobKnob 插件。

我們將在頁面上有範圍輸入控件，但它會被隱藏。然後 KnobKnob 將創建一個旋轉控件，該控件具有與原始滑塊相同的限制。在每次更改時，我們都會更新隱藏滑塊的值：

滑塊旋鈕.html

<div id="container">
    <div id="control"></div>
</div>

<!-- The range input is hidden and updated on each rotation of the knob -->
<input type="range" id="slider" min="0" max="500" value="25" />

<p class="note">Current value: <span id="currentValue">0</span></p>

而對於 jQuery 部分：

assets/js/slider-knob.js

$(function(){

    var slider = $('#slider'),
        min = slider.attr('min'),
        max = slider.attr('max'),
        currentValue = $('#currentValue');

    // Hiding the slider:
    slider.hide();

    $('#control').knobKnob({
        snap : 10,
        value: 250,
        turn : function(ratio){
            // Changing the value of the hidden slider
            slider.val(Math.round(ratio*(max-min) + min));

            // Updating the current value text
            currentValue.html(slider.val());
        }
    });

});

上面的代碼取範圍輸入的 min 和 max 屬性，並用它來計算滑塊的對應值。

結論

滑塊控件對於使用戶能夠方便地修改值而無需在文本框中顯式鍵入它很有用。儘管在瀏覽器支持方面還有很多不足之處，但您可以使用漸進增強來顯示使用 jQuery 的替代控件。