JQuery的UI滑塊 - 輸入價值和滑塊移動到位置

我想知道是否有人已經找到一個解決方案或例子實際填充滑塊的輸入框，並讓它滑動到適當的位置onBlur（）..目前，大家都知道，它只是用你所處的位置來更新這個值。所以在某些方面，我試圖扭轉這個驚人的滑塊的功能。JQuery的UI滑塊 - 輸入價值和滑塊移動到位置

我發現的一個鏈接：http://www.webdeveloper.com/forum/archive/index.php/t-177578.html有點過時了，但看起來像他們做了一個嘗試。但是，結果的鏈接不存在。我希望可能有解決方案。

我知道Filament已經重新設計了滑塊來處理選擇（下拉）值，並且它完美地工作。所以目標是做同樣的事情，但是使用輸入文本框。

來源

2009-08-25 RobertC

這會做你想做的嗎？

$("#slider-text-box").blur(function() { 
    $("#slider").slider('option', 'value', parseInt($(this).val())); 
});

在滑塊每個選項都有一個setter以及吸氣劑，以便可以設置與該值，如在上面的例子。從文檔：

//getter 
var value = $('.selector').slider('option', 'value'); 
//setter 
$('.selector').slider('option', 'value', 37);

UPDATE：

對於雙滑塊，您需要使用：

$("#amount").blur(function() { 
    $("#slider-range").slider("values", 0, parseInt($(this).val())); 
}); 
$("#amount2").blur(function() { 
    $("#slider-range").slider("values", 1, parseInt($(this).val())); 
});

你需要使用Math.min/max以確保一個沒有按價值因爲二傳手似乎沒有阻止這一點。

當你使用$("#slider-range").slider("values", 0)來獲得每個值時，你幾乎就在那裏。很多jQuery有這樣的get/set約定，其中額外的參數用於設置值。

來源

2009-08-25 18:46:37

這就是我去過的，它的雙滑塊。我試着用你的例子，但沒有成功。即使我的getter也不同，就像你在alert函數中看到的一樣。我注意到了警報和測試製定者。然而，它將[object]作爲值發送迴文本框。我將不得不拆分代碼，因爲我在剩下的字符上運行得很低.. – RobertC 2009-08-27 21:59:37

好吧，我似乎無法找到一種方法在這裏或至少在評論部分發布代碼，所以我把它放在我的網站。如果你不介意，請查看源代碼。如果你更喜歡把它發佈在Drupal之外，我也可以做到這一點。謝謝，我感謝所有的幫助！ http://dev.brilliance.com/test-slider – RobertC 2009-08-27 22:07:30

我已經做了一些工作圍繞jQuery UI的滑塊，使其從一個文本框接受值，它可能不是你是什麼之後，但可以幫助：

http://chowamigo.blogspot.com/2009/10/jquery-ui-slider-that-uses-text-box-for.html

來源

2009-10-28 15:39:44 user182373

非常好，我們如何將這個值傳遞給表單域？我沒有檢查你的代碼，所以沒有看到什麼值得到更新。謝謝 – 422 2011-04-21 08:41:27

演示中的鏈接已關閉:( – woggles 2012-10-11 09:18:02

$slider = $("#slider"); 
      $("#amountMin").blur(function() {  
       $slider.slider("values", 0,Math.min($slider.slider("values", 1),parseInt($(this).val()))); 
       $(this).val(Math.min($slider.slider("values", 1),parseInt($(this).val()))); 

      }); 
      $("#amountMax").blur(function() { 
       $slider.slider("values",1,Math.max($slider.slider("values", 0),parseInt($(this).val())));        
       $(this).val(Math.max($slider.slider("values", 0),parseInt($(this).val()))); 
      });

我只是使用馬丁的代碼，並更新了id #slider也添加了math.max，因爲他建議滑塊不會重疊。

來源

2010-07-21 19:36:21

嗨，這應該被添加到文件。 – 2011-12-23 10:25:38

JQuery的UI滑塊 - 輸入價值和滑塊移動到位置

回答

相關問題