前端開(kāi)發(fā)：JavaScript 滑塊控件

文為大家推薦一些實(shí)用的JavaScript 滑塊控件，希望在今后的前端過(guò)程中有所幫助！

1、Ion.RangeSlider（強(qiáng)大的、易于自定義的范圍滑塊選擇庫(kù)，支持很多配置和皮膚）

2、noUiSlider（輕量無(wú)冗余的、高度定制化的滑塊選擇庫(kù)）

3、jQRangeSlider（支持日期的滑塊選擇庫(kù)）

4、rangeslider.js（HTML5 input 區(qū)域滑塊元素）

5、nstSlider.js（完全自定義的CSS，單/雙手柄，觸摸功能，IE7+兼容，自定義位四舍五入，非直線(xiàn)步進(jìn)增量！）

6、Glide.js（支持 swipe 事件，箭頭和子彈導(dǎo)航，鍵盤(pán)導(dǎo)航，公共 API 回調(diào)，自動(dòng)播放和懸停暫停功能。）

切版 qieban(.cn)

滑塊設(shè)計(jì)中需要注意“做什么”和“不應(yīng)該做什么”呢？本文將來(lái)探討下，enjoy~

價(jià)格范圍滑塊，360度視圖滑塊，時(shí)間線(xiàn)滑塊……

在所有這些例子中，滑塊都很有用，因?yàn)闇p少了用戶(hù)的輸入，更可以推動(dòng)用戶(hù)探索更多選項(xiàng)，從而幫助他們做出明智的決定。

那么，在滑塊設(shè)計(jì)中需要注意“做什么”和“不應(yīng)該做什么”呢？一起來(lái)分析探討一下：

文章大綱：

什么時(shí)候我們需要滑塊？
滑塊組件有哪些類(lèi)型？
哪一些情況并不應(yīng)該采用滑塊？
滑塊設(shè)計(jì)需要考慮的問(wèn)題清單
滑塊設(shè)計(jì)問(wèn)題具體探討
總結(jié)

1. 什么時(shí)候我們需要滑塊？

并不是每個(gè)頁(yè)面都可以從滑塊中受益。但是，如果我們想要設(shè)定幾種選項(xiàng)或幫助用戶(hù)快速限制多個(gè)選項(xiàng)時(shí)，或者用戶(hù)對(duì)于輸入結(jié)果相對(duì)模糊或不準(zhǔn)確時(shí)，滑塊就可以被考慮使用了。

例如：用戶(hù)選擇抵押的首付范圍或者機(jī)場(chǎng)出發(fā)的時(shí)間范圍，在這種情況下用戶(hù)選擇到最后一分的數(shù)額或者選擇到最后一秒的出發(fā)時(shí)間并不是真正需要的。

例如：在探索度假目的地時(shí)，用戶(hù)可能希望通過(guò)他們喜歡體驗(yàn)的活動(dòng)來(lái)篩選他們的選項(xiàng)。在這種情況下，可以使用滑塊來(lái)使其能夠?yàn)楦鞣N活動(dòng)分配權(quán)重，以便最終選擇的選項(xiàng)根據(jù)其興趣精確定制。或者在處理地圖時(shí)，滑塊可以幫助用戶(hù)限制或擴(kuò)展搜索的地理范圍。

例如：購(gòu)物中的例子：當(dāng)你選擇快遞速度的時(shí)候，可以選擇快遞方式來(lái)查看快遞費(fèi)用。當(dāng)然可以通過(guò)下拉菜單，但是顯然單選按鈕更直觀(guān)，選擇項(xiàng)直接暴露給用戶(hù)。這個(gè)時(shí)候滑塊自然就是可以適用的，只要增加對(duì)應(yīng)的價(jià)格提示。另外每個(gè)選擇上方的價(jià)格提示更有針對(duì)性，右滑價(jià)格更高，左滑價(jià)格降低，顯得更清楚。

一般來(lái)說(shuō)，每當(dāng)你想在你的界面上添加一個(gè)“模糊”過(guò)濾器或者指示選項(xiàng)之間的關(guān)系時(shí)，滑塊是一個(gè)值得考慮的選擇。然而，一個(gè)相應(yīng)緩慢，顯得笨重的滑塊比一個(gè)可預(yù)測(cè)的通用按鈕更令人沮喪。要有效，滑塊必須非常容易操作，并且必須快速而持續(xù)地響應(yīng)變化。

2. 滑塊組件有哪些類(lèi)型

2.1 單連續(xù)滑塊

如果滑塊的主要目標(biāo)是從一系列值中選擇一個(gè)值，那么我們可以使用一個(gè)連續(xù)的滑塊。

2.2 單一，離散滑塊

如果連續(xù)滑塊允許客戶(hù)連續(xù)更改滑塊上的值，則離散滑塊僅允許選擇預(yù)定義的值組。

2.3 雙點(diǎn)滑塊（兩個(gè)連續(xù)的滑塊）

過(guò)濾或者劃分某個(gè)區(qū)間

3. 哪一些情況并不應(yīng)該采用滑塊

滑塊組件之間的元素都應(yīng)該存在互動(dòng)的關(guān)聯(lián)關(guān)系。每當(dāng)滑塊從左向右進(jìn)行操作時(shí)，最終值應(yīng)該和前面的值存在關(guān)聯(lián)。就好像音量控制器。往右是增長(zhǎng)，往左數(shù)值減小。

反例1：滑塊并沒(méi)有包含進(jìn)度、線(xiàn)性的關(guān)系

反例2：對(duì)于有限的選項(xiàng)，滑塊不是最佳的

反例3：數(shù)值變化未突出顯示

只要其中一個(gè)條件沒(méi)有得到滿(mǎn)足，這可能是一個(gè)滑塊并不是一個(gè)完美的解決問(wèn)題的方案。但是，如果在您的情況下確實(shí)是有意義的，那么您必須進(jìn)行大量的設(shè)計(jì)考慮才能為您的設(shè)計(jì)找到最佳的解決方案。

4. 滑塊設(shè)計(jì)需要考慮的問(wèn)題清單

滑塊是否是這個(gè)問(wèn)題的正確解決方案，或者我們應(yīng)該使用單選按鈕還是復(fù)選框？
我們可以為滑塊提供多大的空間，以及如何使它在小屏幕和大屏幕上運(yùn)行良好？
我們使用單個(gè)還是雙重滑塊？
滑塊應(yīng)該連續(xù)還是離散？
我們?nèi)绾卧O(shè)計(jì)滑塊，軌道和標(biāo)簽？
我們?nèi)绾芜x擇滑動(dòng)標(biāo)尺：線(xiàn)性還是非線(xiàn)性？
我們需要多少滴答點(diǎn)，我們?nèi)绾卧O(shè)計(jì)它們？
我們?nèi)绾螛?biāo)記滑條的下邊界和上邊界？
如果有的話(huà)，我們使用滑塊的圖標(biāo)是什么？
我們?nèi)绾我约霸谀睦镲@示當(dāng)前值？
滑塊是否需要精確的輸入（例如輸入域）？如果是，我們?nèi)绾伪硎緮?shù)字輸入是可編輯的？
我們是否需要使用經(jīng)常使用的值或值范圍作為預(yù)設(shè)來(lái)將用戶(hù)推向“最佳”選項(xiàng)？
我們?nèi)绾沃甘究捎眯砸员苊馑篮?/li>
滑塊軌跡應(yīng)該如何隨拇指移動(dòng)而改變？
使用雙滑塊，如果用戶(hù)將末端拇指移動(dòng)到左手拇指上，或者反過(guò)來(lái)，會(huì)發(fā)生什么情況？如果用戶(hù)點(diǎn)擊或點(diǎn)擊兩個(gè)拇指之間的區(qū)域會(huì)發(fā)生什么？UI是否應(yīng)該調(diào)整下限或上限？還是應(yīng)該完全禁用這個(gè)動(dòng)作？
滑塊上是否有任何值不應(yīng)被接受？
我們是否應(yīng)該接受選擇太多或太少的范圍？
用戶(hù)是否能夠恢復(fù)以前的滑塊操作狀態(tài)？
我們是否應(yīng)該添加動(dòng)畫(huà)或轉(zhuǎn)換到交互？
我們有相互依存的滑塊，滑塊的輸入取決于之前的輸入嗎？用戶(hù)是否應(yīng)該能夠“鎖定”一些值？

5. 滑塊設(shè)計(jì)問(wèn)題探討

5.1 滑塊所需要的區(qū)域空間

滑塊組件，雖然只是一個(gè)過(guò)濾選項(xiàng)，不需要太多的空間，但是為了有效且易于操作，滑塊還是需要大量的水平空間。滑塊按鈕必須足夠大，軌道必須足夠?qū)捯员阌邳c(diǎn)擊。

如果滑塊的寬度只有200~300px，用戶(hù)進(jìn)行選擇探索的時(shí)候?qū)⒎浅＠щy。例如谷歌字體大小滑塊，獲取正確的值非常的困難。

對(duì)滑塊組件空間要求有很大影響的一個(gè)重要變量是滑塊上的關(guān)鍵刻度線(xiàn)。如果所需要的關(guān)鍵刻度越多，那么所需要的空間就越大。由于滑塊也必須具有響應(yīng)性，因此這些刻度線(xiàn)之間必須足夠大以至于不需要太高的精度。

那么，多大足夠大，關(guān)鍵刻度線(xiàn)之間水平間距至少65px。滑塊按鈕必須32x32px。那么對(duì)于相應(yīng)布局呢？刻度線(xiàn)之間的間距會(huì)隨著尺寸變化而縮放。所以，還需要在滑塊上設(shè)置最大寬度，同樣設(shè)定最小的間距。一旦確定間距約束，就可以設(shè)置周?chē)慕M件。

5.2 顯示刻度標(biāo)記和當(dāng)前值

假設(shè)大量的刻度線(xiàn)顯示在離軌道非常近的未知，用戶(hù)一旦用戶(hù)，滑動(dòng)按鈕就會(huì)出現(xiàn)遮擋的情況。這個(gè)時(shí)候可以采用垂直的分隔線(xiàn)來(lái)指示滑塊的值與位置之間的聯(lián)系。

5.3 滑塊范圍比例的設(shè)定

滑塊的定位是一回事，但選擇一個(gè)尺度來(lái)準(zhǔn)確的反應(yīng)所選擇的范圍是另外一回事。就好比服裝店有數(shù)百件商品，價(jià)格從50美元到15000美元不等，你怎么設(shè)計(jì)你對(duì)滑塊范圍比例？在軌道中間設(shè)置多少值？

默認(rèn)情況下，我們假設(shè)一個(gè)合適的滑塊范圍比例應(yīng)該是線(xiàn)性的，將整個(gè)范圍分解成一組等距的線(xiàn)段。不過(guò)像上面的例子，軌道中間設(shè)置7500美元，但是這將是非常無(wú)效的，因?yàn)?0%的軌道被用來(lái)控制1%的產(chǎn)品。換句話(huà)說(shuō)大部分將代表過(guò)濾中沒(méi)有變化，小部分代表過(guò)濾中的巨大變化。實(shí)際產(chǎn)品中出現(xiàn)的情況很多。當(dāng)發(fā)生這種情況時(shí)，用戶(hù)將會(huì)面臨很大的壓力。

好的解決案例：使用預(yù)先定義的預(yù)設(shè)，用戶(hù)可以跳轉(zhuǎn)

例子2：帶有直方圖的線(xiàn)性?xún)r(jià)格滑塊可提供更多信息

這種方法不僅可以幫助用戶(hù)導(dǎo)航滑塊上的范圍，也可以減少死胡同（令人沮喪的無(wú)結(jié)果頁(yè)）。

5.4 消除零結(jié)果過(guò)濾

避免零結(jié)果頁(yè)面的策略：

例子1：根據(jù)內(nèi)容分布來(lái)定義刻度值。將整個(gè)范圍分成幾個(gè)部分，每個(gè)部分都有相同數(shù)目的結(jié)果。

例子2：airbnb的直方圖滑塊顯示價(jià)格分布

5.5 視覺(jué)增強(qiáng)指示范圍

提供范圍值，以及視覺(jué)指向

5.6 可視化選擇結(jié)果

在某些場(chǎng)景下，視覺(jué)動(dòng)畫(huà)是一個(gè)不錯(cuò)的主意。

5.7 滑動(dòng)流暢響應(yīng)

如果滑動(dòng)響應(yīng)緩慢，會(huì)顯得很笨重。當(dāng)用戶(hù)與滑塊交互時(shí)，必須確保交互的連續(xù)性。

設(shè)計(jì)師和開(kāi)發(fā)人員希望用戶(hù)能夠抓住滑塊按鈕來(lái)橫向水平滑動(dòng)。，然而并不一定是大多數(shù)用戶(hù)喜歡的交互，用戶(hù)可能選擇點(diǎn)擊來(lái)跳轉(zhuǎn)到軌道上的任何值。這就意味著水平軌道必須輕易的可以被點(diǎn)擊到。

我們也可以放大滑塊按鈕，改變他的顏色，添加一些陰影，甚至改變軌道的顏色。

5.8 精確的內(nèi)編輯，增強(qiáng)滑塊體驗(yàn)

要使用滑塊提供精確輸入的快捷方式，我們可以使用預(yù)定義的預(yù)設(shè)值（頻繁選擇的值或值范圍），也可以使用文本輸入字段回退來(lái)增強(qiáng)滑塊。預(yù)設(shè)值和輸入字段都可以逐步公開(kāi) – 既可以通過(guò)點(diǎn)擊按鈕，也可以通過(guò)點(diǎn)擊滑塊上的當(dāng)前值。

5.9 游標(biāo)可視化反饋，增強(qiáng)滑塊體驗(yàn)

5.10 提供額外的“滑塊”

相互依賴(lài)的滑塊，一個(gè)滑塊的更改可能會(huì)限制后續(xù)滑塊的選項(xiàng)，建議擴(kuò)展滑塊上的“可填充”區(qū)域以指示改變的范圍。

如果一個(gè)滑塊中的值發(fā)生變化，則會(huì)提示其他滑塊向上或向下縮放，我們也可以在一個(gè)滑塊中“鎖定”一個(gè)滑塊，旁邊有一個(gè)掛鎖圖標(biāo)。

總結(jié)

如果你的界面只接受幾個(gè)輸入選項(xiàng)，那么使用滑塊可能是一個(gè)畫(huà)蛇添足的操作。一組單選按鈕，復(fù)選按鈕或預(yù)定義的選項(xiàng)可能會(huì)更好。但是如果對(duì)于用戶(hù)的輸入是鼓勵(lì)探索的機(jī)制，而不是精確，滑塊絕對(duì)是一個(gè)不錯(cuò)的選擇。

與滑塊交互的重要點(diǎn)是快速顯示結(jié)果。這意味著不用強(qiáng)迫用戶(hù)點(diǎn)擊按鈕來(lái)查看結(jié)果，或者等待顯示結(jié)果。反饋應(yīng)該是平滑和連續(xù)的，沒(méi)有明顯的滯后。

按鈕滑塊通常不需要任何特殊的視覺(jué)圖像，但需要適當(dāng)?shù)囊曈X(jué)指示處理，平滑的過(guò)度和動(dòng)畫(huà)可以增強(qiáng)用戶(hù)的參與度。刻度線(xiàn)不僅可以幫助用戶(hù)定位滑塊，更可以指示可以跳轉(zhuǎn)的離散值。請(qǐng)記住，算法尺度通常比線(xiàn)性尺度更好用。

當(dāng)用戶(hù)在軌道上移動(dòng)滑塊時(shí)，我們可以放大懸停的滑塊，添加一些陰影，改變軌道的顏色。最后，精致的可編輯可以一定程度上增強(qiáng)滑塊體驗(yàn)。

原文作者：Vitaly Friedman

原文地址：https://www.smashingmagazine.com/2017/07/designing-perfect-slider/

譯者：UX筆記本，（微信號(hào)公眾號(hào)：大貓的設(shè)計(jì)本），UX/UI設(shè)計(jì)師，關(guān)注互聯(lián)網(wǎng)設(shè)計(jì)動(dòng)態(tài)，關(guān)注設(shè)計(jì)細(xì)節(jié)，愛(ài)思考，愛(ài)總結(jié)。

本文由 @UX筆記本翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

題圖由作者提供

塊QSlider控件提供一個(gè)垂直或者水平的滑動(dòng)條，滑動(dòng)條是一個(gè)用于控制有界值典型的控件，它允許用戶(hù)沿水平或者垂直方向在某一范圍內(nèi)移動(dòng)滑塊，并將滑塊所在的位置轉(zhuǎn)換為一個(gè)合法范圍內(nèi)的整數(shù)值，有時(shí)候這中方式比輸入數(shù)字更加自然。

QSlider控件的常用事件類(lèi)型有如下幾種。

事件類(lèi)型	描述
vlaueChanged	滑塊的值發(fā)生改變時(shí)觸發(fā)事件，此類(lèi)型是最常用的
sliderPressed	按下滑塊時(shí)觸發(fā)事件
sliderMoved	拖動(dòng)滑塊時(shí)觸發(fā)事件
slierReleased	釋放滑塊時(shí)觸發(fā)事件

滑塊控件QSlider可以以水平或垂直的方式顯示，只需在構(gòu)造函數(shù)中設(shè)置不同的值即可，Qt.Horizontal表示水平，Qt.Vertical表示垂直。QSlider控件的常用方法如下表所示。

方法	描述
setMinimum()	設(shè)置滑動(dòng)條控件的最小值
setMaximum()	設(shè)置滑動(dòng)條控件的最大值
setSingleStep()	設(shè)置滑動(dòng)條控件的步長(zhǎng)
setValue()	設(shè)置滑動(dòng)條控件的值
value()	獲取滑動(dòng)條控件的值
setTickInterval()	設(shè)置刻度間隔
setTickPosition (QSlider_TickPosition)	設(shè)置刻度標(biāo)記的位置，可以輸入一個(gè)枚舉值，這個(gè)枚舉值指定刻度線(xiàn)相當(dāng)于滑塊和用戶(hù)操作的位置，可選枚舉值，往下看。

QSlider_TickPosition可選枚舉值如下表所示。

枚舉值	描述
QSlider.NoTicks	不繪制任何刻度線(xiàn)
QSlider.TicksBothSides	在滑塊的兩側(cè)繪制刻度線(xiàn)
QSlider.TicksAbove	在水平的滑塊上方繪制刻度線(xiàn)
QSlider.TicksBelow	在水平的滑塊下方繪制刻度線(xiàn)
QSlider.TicksLeft	在垂直滑塊的左側(cè)繪制刻度線(xiàn)
QSlider.TicksRight	在垂直滑塊的右側(cè)繪制刻度線(xiàn)

程序清單：slider.py

import sys
from PyQt5.QtWidgets import QApplication, QWidget, QDesktopWidget, QLabel,
  QSlider, QSpinBox, QVBoxLayout
from PyQt5.QtCore import Qt


# 繼承QWidget
class SliderWidget(QWidget):
    info_lbl = None

    def __init__(self):
        super().__init__()
        self.init_ui()

    def init_ui(self):
        # 垂直布局
        v_box = QVBoxLayout()
        self.info_lbl = QLabel("滑塊控件的當(dāng)前值為:10")
        v_box.addWidget(self.info_lbl)
        # 創(chuàng)建水平方向滑動(dòng)條
        slider = QSlider(Qt.Horizontal)
        slider.setProperty("id", 1)
        slider.setMinimum(10)  # 設(shè)置最小值
        slider.setMaximum(100)  # 設(shè)置最大值
        slider.setSingleStep(10)  # 步長(zhǎng)
        slider.setValue(20)  # 設(shè)置當(dāng)前值
        slider.setTickInterval(10)  # 設(shè)置刻度間距
        slider.valueChanged.connect(self.valuechange)
        v_box.addWidget(slider)
        self.setLayout(v_box)
        # 調(diào)整窗口大小
        self.resize(600, 200)
        # 窗口居中
        self.center()
        # 窗口標(biāo)題
        self.setWindowTitle("滑塊的應(yīng)用")
        # 顯示窗口
        self.show()

    def valuechange(self):
        sender = self.sender()
        self.info_lbl.setText("滑塊控件的當(dāng)前值為:%d" % sender.value())

    # 實(shí)現(xiàn)居中
    def center(self):
        f = self.frameGeometry()
        c = QDesktopWidget().availableGeometry().center()
        f.moveCenter(c)
        self.move(f.topLeft())


if __name__ == "__main__":
    app = QApplication(sys.argv)
    w = SliderWidget()
    sys.exit(app.exec_())

運(yùn)行程序之后，彈出的窗口如下：

好了，滑塊控件的內(nèi)容就說(shuō)到這了，關(guān)注我，下一節(jié)更精彩。

碼字不易，你的關(guān)注和轉(zhuǎn)發(fā)是對(duì)我最大的鼓勵(lì)，謝謝！

一個(gè)當(dāng)了10年技術(shù)總監(jiān)的老家伙，分享多年的編程經(jīng)驗(yàn)。想學(xué)編程的朋友，關(guān)注我，你就賺到了。我正在分享Python、前端、Java和App方面的干貨了。趕緊來(lái)圍觀(guān)啊!!!

#python#

在線(xiàn)咨詢(xún)

上一篇：CKEditor系列（五）編輯器內(nèi)容的設(shè)置和獲取過(guò)程
下一篇：Html學(xué)習(xí)筆記（主體結(jié)構(gòu)&教程資料）

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷(xiāo)服務(wù)商