jQuery UI滑块-有预定义的'

jQuery UI Slider - have predefined 'pips'

本文关键字：预定义 UI 滑块 jQuery      更新时间：2023-09-26

我有一个以100为间隔的jQuery UI滑块，我想在滑块下方或上方以不同的间隔(例如100、500、1000、2000)设置一些点/线，这样当用户点击这些滑块时，滑块就会直接"捕捉"到这个值。这可能吗?

目前的代码是:

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

有一个名为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>
相关文章：