Question

我有一个jQuery UI滑块，间隔为100，我希望在滑块下方或上方有一些点/线，以不同的间隔，如100,500,1000,2000，所以当用户点击这些滑块将＆＃39;卡＆＃39;直接到这个值。这可能吗？

目前的代码是：

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);
            }
          );
        }
      }
});

Answer 1

有一个名为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>

jQuery UI Slider - 预先定义了＆＃39; pips＆＃39;

1 个答案: