Слайдер пользовательского интерфейса jQuery - имеет предопределенные "пипсы"

#javascript #jquery #jquery-ui

#javascript #jquery #jquery-пользовательский интерфейс

Вопрос:

У меня есть jQuery UI slider, который идет с интервалом в 100, я хочу, чтобы несколько пунктов / строк были под или над слайдером с различными интервалами, такими как 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);
            }
          );
        }
      }
});

1. может быть, другой скрипт, например simeydotme.github.io/jQuery-ui-Slider-Pips

2. Я видел это в исследовании, однако, похоже, оно разбивается только на каждом интервале, мне нужно иметь его в предопределенных точках

Ответ №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>