jQuery UI Slider - 定義済みの 'pips'

jQuery UIスライダーが100の間隔で表示されています。スライダーの下または上に100、500、1000、2000などのピリオドユーザーがこれらをクリックすると、スライダはこの値にまっすぐ「スナップ」します。これは可能ですか？これまでjQuery UI Slider - 定義済みの 'pips'

コードは次のとおりです。

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 UI Slider - 定義済みの 'pips'

答えて

関連する問題