jQuery用戶界面滑塊 - 有預定義的「點」

我有一個jQuery UI滑塊，間隔爲100，我想要以不同的時間間隔（如100,500,1000,2000）在滑塊下面或上方有一些點/線所以當用戶點擊這些時，滑塊會直接對齊該值。這可能嗎？jQuery用戶界面滑塊 - 有預定義的「點」

到目前爲止的代碼是：

jQuery("#slider").slider({ 
    value:2000, 
     min: 100, 
     max: 10000, 
     step: 100, 
     slide: function(event, ui) { 
      jQuery("#amount").val(ui.value); 
     }, 
     stop: function(event, ui) { 
     if(!$("#age").val()) { 
      alert("Please Enter Your Age"); 
      jQuery("#slider").slider("value", 2000); 
      jQuery("#amount").val($("#slider").slider("value")); 
     } 
     else if (!$("#name").val()) { 
      alert("Please Enter Your Name"); 
      jQuery("#slider").slider("value", 2000); 
      jQuery("#amount").val($("#slider").slider("value")); 
     } 
     else if (!$("#email").val()) { 
      alert("Please Enter Your Email"); 
      jQuery("#slider").slider("value", 2000); 
      jQuery("#amount").val($("#slider").slider("value")); 
     } 
     else { 
      jQuery("#amount").val(ui.value); 
      jQuery("p.loanSummary").text("Searching for loan amount €" + ui.value); 

      jQuery("button.compareLoans").show(); 
      jQuery("p.toBorrow").show(); 

      jQuery(".userData").fadeOut("slow"); 

      jQuery.post(
      MyAjax.ajaxurl, 
      { 
       action : "myajax-submit", 
       postID : MyAjax.postID, 
       postCommentNonce : MyAjax.postCommentNonce, 
       amount : $("#slider").slider("value"), 
       age : $("#age").val(), 
      }, 
      function(response) { 
       $("#content_update").html(response); 
      } 
     ); 
     } 
     } 
});

來源

2016-09-30 AppleTattooGuy

也許另一個腳本像http://simeydotme.github.io/jQuery-ui-Slider-Pips/ – depperm

我確實在研究中看到，但是它似乎只是在每個時間間隔上分解它，我需要在預定的時間點 – AppleTattooGuy

有一個叫noUiSlider其中有你想要的功能庫。下面是一個例子，假設你已經下載了圖書館，並在同一個文件夾中的文件：

<head> 
    <script src="https://code.jquery.com/jquery-2.1.1.js"></script> 
    <script src="https://code.jquery.com/ui/1.11.1/jquery-ui.js"></script> 
    <script src="nouislider.js"></script> 

    <link rel="stylesheet" href="nouislider.css"> 
</head> 

<div id="slider"></div> 
<div id='slider-val'></div> 
<script> 
    var range_all_sliders = { 
    'min': [  100 ], 
    '5%': [ 500 ], 
    '10%': [ 1000 ], 
    '20%': [ 2000 ], 
    'max': [ 10000 ] 
    }; 
    var pipsRange = document.getElementById('slider'); 
    noUiSlider.create(pipsRange, { 
    range: range_all_sliders, 
    start: 100, 
    step: 1, 
    pips: { 
     mode: 'range', 
     density: 4 
    } 
    }); 
    $('.noUi-value-large').on('click',function(){ 
    var val=parseInt($(this).text()); 
    pipsRange.noUiSlider.set(val); 
    }); 
    pipsRange.noUiSlider.on('update', function(values, handle) { 
    $('#slider-val').html(values); 
    }); 
</script>

來源

2016-09-30 18:33:50 depperm

jQuery用戶界面滑塊 - 有預定義的「點」

回答

相關問題