整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
文為大家推薦一些實用的JavaScript 滑塊控件，希望在今后的前端過程中有所幫助！
1、Ion.RangeSlider（強大的、易于自定義的范圍滑塊選擇庫，支持很多配置和皮膚）
2、noUiSlider（輕量無冗余的、高度定制化的滑塊選擇庫）
3、jQRangeSlider（支持日期的滑塊選擇庫）
4、rangeslider.js（HTML5 input 區域滑塊元素）
5、nstSlider.js（完全自定義的CSS，單/雙手柄，觸摸功能，IE7+兼容，自定義位四舍五入，非直線步進增量！）
6、Glide.js（支持 swipe 事件，箭頭和子彈導航，鍵盤導航，公共 API 回調，自動播放和懸停暫停功能。）
切版 qieban(.cn)
滑塊設計中需要注意“做什么”和“不應該做什么”呢？本文將來探討下，enjoy~
價格范圍滑塊，360度視圖滑塊，時間線滑塊……
在所有這些例子中，滑塊都很有用，因為減少了用戶的輸入，更可以推動用戶探索更多選項，從而幫助他們做出明智的決定。
那么，在滑塊設計中需要注意“做什么”和“不應該做什么”呢？一起來分析探討一下：
文章大綱：
并不是每個頁面都可以從滑塊中受益。但是，如果我們想要設定幾種選項或幫助用戶快速限制多個選項時，或者用戶對于輸入結果相對模糊或不準確時，滑塊就可以被考慮使用了。
例如：用戶選擇抵押的首付范圍或者機場出發的時間范圍，在這種情況下用戶選擇到最后一分的數額或者選擇到最后一秒的出發時間并不是真正需要的。
例如：在探索度假目的地時，用戶可能希望通過他們喜歡體驗的活動來篩選他們的選項。在這種情況下，可以使用滑塊來使其能夠為各種活動分配權重，以便最終選擇的選項根據其興趣精確定制。或者在處理地圖時，滑塊可以幫助用戶限制或擴展搜索的地理范圍。
例如：購物中的例子：當你選擇快遞速度的時候，可以選擇快遞方式來查看快遞費用。當然可以通過下拉菜單，但是顯然單選按鈕更直觀，選擇項直接暴露給用戶。這個時候滑塊自然就是可以適用的，只要增加對應的價格提示。另外每個選擇上方的價格提示更有針對性，右滑價格更高，左滑價格降低，顯得更清楚。
一般來說，每當你想在你的界面上添加一個“模糊”過濾器或者指示選項之間的關系時，滑塊是一個值得考慮的選擇。然而，一個相應緩慢，顯得笨重的滑塊比一個可預測的通用按鈕更令人沮喪。要有效，滑塊必須非常容易操作，并且必須快速而持續地響應變化。
如果滑塊的主要目標是從一系列值中選擇一個值，那么我們可以使用一個連續的滑塊。
如果連續滑塊允許客戶連續更改滑塊上的值，則離散滑塊僅允許選擇預定義的值組。
過濾或者劃分某個區間
滑塊組件之間的元素都應該存在互動的關聯關系。每當滑塊從左向右進行操作時，最終值應該和前面的值存在關聯。就好像音量控制器。往右是增長，往左數值減小。
只要其中一個條件沒有得到滿足，這可能是一個滑塊并不是一個完美的解決問題的方案。但是，如果在您的情況下確實是有意義的，那么您必須進行大量的設計考慮才能為您的設計找到最佳的解決方案。
滑塊組件，雖然只是一個過濾選項，不需要太多的空間，但是為了有效且易于操作，滑塊還是需要大量的水平空間。滑塊按鈕必須足夠大，軌道必須足夠寬以便于點擊。
如果滑塊的寬度只有200~300px，用戶進行選擇探索的時候將非常困難。例如谷歌字體大小滑塊，獲取正確的值非常的困難。
對滑塊組件空間要求有很大影響的一個重要變量是滑塊上的關鍵刻度線。如果所需要的關鍵刻度越多，那么所需要的空間就越大。由于滑塊也必須具有響應性，因此這些刻度線之間必須足夠大以至于不需要太高的精度。
那么，多大足夠大，關鍵刻度線之間水平間距至少65px。滑塊按鈕必須32x32px。那么對于相應布局呢？刻度線之間的間距會隨著尺寸變化而縮放。所以，還需要在滑塊上設置最大寬度，同樣設定最小的間距。一旦確定間距約束，就可以設置周圍的組件。
假設大量的刻度線顯示在離軌道非常近的未知，用戶一旦用戶，滑動按鈕就會出現遮擋的情況。這個時候可以采用垂直的分隔線來指示滑塊的值與位置之間的聯系。
滑塊的定位是一回事，但選擇一個尺度來準確的反應所選擇的范圍是另外一回事。就好比服裝店有數百件商品，價格從50美元到15000美元不等，你怎么設計你對滑塊范圍比例？在軌道中間設置多少值？
默認情況下，我們假設一個合適的滑塊范圍比例應該是線性的，將整個范圍分解成一組等距的線段。不過像上面的例子，軌道中間設置7500美元，但是這將是非常無效的，因為50%的軌道被用來控制1%的產品。換句話說大部分將代表過濾中沒有變化，小部分代表過濾中的巨大變化。實際產品中出現的情況很多。當發生這種情況時，用戶將會面臨很大的壓力。
好的解決案例：使用預先定義的預設，用戶可以跳轉
例子2：帶有直方圖的線性價格滑塊可提供更多信息
這種方法不僅可以幫助用戶導航滑塊上的范圍，也可以減少死胡同（令人沮喪的無結果頁）。
避免零結果頁面的策略：
例子1：根據內容分布來定義刻度值。將整個范圍分成幾個部分，每個部分都有相同數目的結果。
例子2：airbnb的直方圖滑塊顯示價格分布
提供范圍值，以及視覺指向
在某些場景下，視覺動畫是一個不錯的主意。
如果滑動響應緩慢，會顯得很笨重。當用戶與滑塊交互時，必須確保交互的連續性。
設計師和開發人員希望用戶能夠抓住滑塊按鈕來橫向水平滑動。，然而并不一定是大多數用戶喜歡的交互，用戶可能選擇點擊來跳轉到軌道上的任何值。這就意味著水平軌道必須輕易的可以被點擊到。
我們也可以放大滑塊按鈕，改變他的顏色，添加一些陰影，甚至改變軌道的顏色。
要使用滑塊提供精確輸入的快捷方式，我們可以使用預定義的預設值（頻繁選擇的值或值范圍），也可以使用文本輸入字段回退來增強滑塊。預設值和輸入字段都可以逐步公開 – 既可以通過點擊按鈕，也可以通過點擊滑塊上的當前值。
相互依賴的滑塊，一個滑塊的更改可能會限制后續滑塊的選項，建議擴展滑塊上的“可填充”區域以指示改變的范圍。
如果一個滑塊中的值發生變化，則會提示其他滑塊向上或向下縮放，我們也可以在一個滑塊中“鎖定”一個滑塊，旁邊有一個掛鎖圖標。
如果你的界面只接受幾個輸入選項，那么使用滑塊可能是一個畫蛇添足的操作。一組單選按鈕，復選按鈕或預定義的選項可能會更好。但是如果對于用戶的輸入是鼓勵探索的機制，而不是精確，滑塊絕對是一個不錯的選擇。
與滑塊交互的重要點是快速顯示結果。這意味著不用強迫用戶點擊按鈕來查看結果，或者等待顯示結果。反饋應該是平滑和連續的，沒有明顯的滯后。
按鈕滑塊通常不需要任何特殊的視覺圖像，但需要適當的視覺指示處理，平滑的過度和動畫可以增強用戶的參與度。刻度線不僅可以幫助用戶定位滑塊，更可以指示可以跳轉的離散值。請記住，算法尺度通常比線性尺度更好用。
當用戶在軌道上移動滑塊時，我們可以放大懸停的滑塊，添加一些陰影，改變軌道的顏色。最后，精致的可編輯可以一定程度上增強滑塊體驗。
原文作者：Vitaly Friedman
原文地址：https://www.smashingmagazine.com/2017/07/designing-perfect-slider/
譯者：UX筆記本，（微信號公眾號：大貓的設計本），UX/UI設計師，關注互聯網設計動態，關注設計細節，愛思考，愛總結。
本文由 @UX筆記本 翻譯發布于人人都是產品經理。未經許可，禁止轉載。
題圖由作者提供
塊QSlider控件提供一個垂直或者水平的滑動條，滑動條是一個用于控制有界值典型的控件，它允許用戶沿水平或者垂直方向在某一范圍內移動滑塊，并將滑塊所在的位置轉換為一個合法范圍內的整數值，有時候這中方式比輸入數字更加自然。
QSlider控件的常用事件類型有如下幾種。
事件類型 | 描述 |
vlaueChanged | 滑塊的值發生改變時觸發事件，此類型是最常用的 |
sliderPressed | 按下滑塊時觸發事件 |
sliderMoved | 拖動滑塊時觸發事件 |
slierReleased | 釋放滑塊時觸發事件 |
滑塊控件QSlider可以以水平或垂直的方式顯示，只需在構造函數中設置不同的值即可，Qt.Horizontal表示水平，Qt.Vertical表示垂直。QSlider控件的常用方法如下表所示。
方法 | 描述 |
setMinimum() | 設置滑動條控件的最小值 |
setMaximum() | 設置滑動條控件的最大值 |
setSingleStep() | 設置滑動條控件的步長 |
setValue() | 設置滑動條控件的值 |
value() | 獲取滑動條控件的值 |
setTickInterval() | 設置刻度間隔 |
setTickPosition (QSlider_TickPosition) | 設置刻度標記的位置，可以輸入一個枚舉值，這個枚舉值指定刻度線相當于滑塊和用戶操作的位置，可選枚舉值，往下看。 |
QSlider_TickPosition可選枚舉值如下表所示。
枚舉值 | 描述 |
QSlider.NoTicks | 不繪制任何刻度線 |
QSlider.TicksBothSides | 在滑塊的兩側繪制刻度線 |
QSlider.TicksAbove | 在水平的滑塊上方繪制刻度線 |
QSlider.TicksBelow | 在水平的滑塊下方繪制刻度線 |
QSlider.TicksLeft | 在垂直滑塊的左側繪制刻度線 |
QSlider.TicksRight | 在垂直滑塊的右側繪制刻度線 |
程序清單：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("滑塊控件的當前值為:10")
v_box.addWidget(self.info_lbl)
# 創建水平方向滑動條
slider = QSlider(Qt.Horizontal)
slider.setProperty("id", 1)
slider.setMinimum(10) # 設置最小值
slider.setMaximum(100) # 設置最大值
slider.setSingleStep(10) # 步長
slider.setValue(20) # 設置當前值
slider.setTickInterval(10) # 設置刻度間距
slider.valueChanged.connect(self.valuechange)
v_box.addWidget(slider)
self.setLayout(v_box)
# 調整窗口大小
self.resize(600, 200)
# 窗口居中
self.center()
# 窗口標題
self.setWindowTitle("滑塊的應用")
# 顯示窗口
self.show()
def valuechange(self):
sender = self.sender()
self.info_lbl.setText("滑塊控件的當前值為:%d" % sender.value())
# 實現居中
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_())
運行程序之后，彈出的窗口如下：
好了，滑塊控件的內容就說到這了，關注我，下一節更精彩。
碼字不易，你的關注和轉發是對我最大的鼓勵，謝謝！
一個當了10年技術總監的老家伙，分享多年的編程經驗。想學編程的朋友，關注我，你就賺到了。我正在分享Python、前端、Java和App方面的干貨了。趕緊來圍觀啊!!!
#python#
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
