jquery-ui滑塊手柄完成位置是100％左 - 將它放在滑塊外

我第一次使用jQuery-ui滑塊，並且被一個相當基本的問題所困惑。設置我的滑塊時，我希望不使用主題。當我從左向右滑動時，滑塊手柄的右手位置步驟1的手柄寬度超出滑塊。這是由於滑塊css將手柄左側定位：100％。我注意到許多使用滑塊的許多其他人沒有任何困難，但看不到他們如何解決這個問題。
Demo of issue
我想我錯過了一些令人尷尬的基本內容，並且很想知道是什麼。
非常感謝jquery-ui滑塊手柄完成位置是100％左 - 將它放在滑塊外

來源

2011-03-13 Ant

在閱讀了更多內容之後，似乎滑塊的設計可以按照所述的方式進行操作，但手柄左側偏移了其寬度的50％。因此，條的中心表示值 - 這使得總體感（當滑動條表示一個值時）。
將滑塊作爲滾動條使用時，只需將滑塊包裹在div中，滑塊左右兩側用50％的寬度填充。我已更新my demo以反映此情況。
如果有人有更好的解決方案，無需額外的div，我希望看到它。

來源

2011-03-13 17:59:54 Ant

我檢查了你的演示。你錯過了一些css文件。您也可以從jquery ui站點下載css文件。例如，ui-widget-content是一個css，它指定滑塊的寬度及其在滑塊中的缺失。獲取一個CSS並將其鏈接到你的頁面，你應該沒問題。

來源

2011-03-13 16:04:15

我一直在尋找這樣做不使用主題CSS，但你指着我正確的方向，謝謝:) – Ant 2011-03-13 18:00:44

設置左邊距或減去手柄

來源

2011-03-29 22:44:57

它還有助於確保傳遞給滑塊的值是整數的寬度的一半。我有一些問題與滑塊在錯誤的地點的指針，但是當我強迫值爲整數，parseInt函數（）像這樣：

值形式：parseInt（whateverValue）

它工作得很好。

來源

2011-09-07 10:37:27 nerdess

我發現CSS「翻譯」屬性在這裏是最好的選擇...

.ui-slider-horizontal .ui-slider-handle { 
    -webkit-transform: translateX(-2px); 
    -moz-transform: translateX(-2px); 
    -ms-transform: translateX(-2px); 
    transform: translateX(-2px); 
}

調整像素值轉化爲你的需求:)

來源

2018-03-06 10:07:11 dBlaze

jquery-ui滑塊手柄完成位置是100％左 - 將它放在滑塊外

回答

相關問題