Как сделать jQuery UI Slider более плавным, когда шаг равен 0,25 - PullRequest
Новая
       40

Как сделать jQuery UI Slider более плавным, когда шаг равен 0,25

0 голосов
/ 24 июня 2018

Я знаю, что мы можем изменить шаг на коротком расстоянии между min и max и Math round значением пользовательского интерфейса, чтобы создать плавное скольжение, например 

step: .0001, 
 ...
$(".value").text("slider value: " + Math.round(ui.value));

но это нормально, если шаг 1. Как насчет этого случая, который 0.25. Подскажите пожалуйста, как сделать слайдер smooteher 

$( function() {
    var handle = $( "#custom-handle" );
    $( "#slider" ).slider({
    min:-12,
    max:6,
    step:0.25,
      create: function() {
        handle.text( $( this ).slider( "value" ) );
      },
      slide: function( event, ui ) {
        handle.text( ui.value.toFixed(2) );
      }
    });
  } );
 body{
  padding:60px;
  }

#slider 
{
    width: 80%;
    margin-left: 1em;
}
 #custom-handle {
    width: 3em;
    height: 1.6em;
    top: 50%;
    margin-top: -.8em;
    text-align: center;
    line-height: 1.6em;
  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css">

<div id="slider">
 <div id="custom-handle" class="ui-slider-handle"></div>
</div>

1 Ответ

0 голосов
/ 27 июня 2018

Исходя из вашего кода и описания, вы бы хотели, чтобы ползунок на самом деле шагал на меньшую величину, например .0001, и отображался с шагом в .25.Например, если текущее значение было -1.00, а пользователь переместил ползунок влево, фактическое значение будет уменьшаться на 0,0001 каждый шаг, а отображаемое значение должно сохраняться -1.25.Поскольку мы работаем с .25, лучше всего перейти на .05.Вы поймете, почему позже.

По сути, нам нужна лучшая математическая функция или наш собственный метод округления.Что-то, что подходит этому 

+-------------+
| x    | r(x) |
+-------------+
| 1.00 | 1.00 |
| 1.05 | 1.00 |
~~~~~~~~~~~~~~~~
| 1.20 | 1.00 |
| 1.25 | 1.25 |
| 1.30 | 1.25 |
+-------------+


$(function() {
  var handle = $("#custom-handle");

  function rounding(l) {
    if (l == 0) {
      return 0.001;
    }
    var neg = false;
    var result = false;
    if (l < 0) {
      l = Math.abs(l);
      neg = true;
    }
    var i = Math.floor(l);
    var d = l - i;
    if (d % .25 == 0) {
      result = i + d;
    }
    if (neg) {
      result = 0 - result;
    }
    return result;
  }

  $("#slider").slider({
    min: -12,
    max: 6,
    step: 0.05,
    create: function() {
      handle.text($(this).slider("value"));
    },
    slide: function(event, ui) {
      $(".raw").html(ui.value);
      var v = rounding(ui.value);
      $(".format").html(v);
      if (v) {
        handle.text(v.toFixed(2));
      }
    }
  });
});
body {
  padding: 60px;
}

#slider {
  width: 80%;
  margin-left: 1em;
}

#custom-handle {
  width: 3em;
  height: 1.6em;
  top: 50%;
  margin-top: -.8em;
  text-align: center;
  line-height: 1.6em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css">

<div id="slider">
  <div id="custom-handle" class="ui-slider-handle"></div>
</div>
<div class="raw"></div>
<div class="format"></div>

Чтобы рассмотреть только десятичное число, мы можем разбить наш Long 1.25 на целое число (i), равное 1 и десятичному(d) будет .25.Затем мы можем использовать Modulo d % .25, это вернет только остаток.Например: .26 % .25 = .01

Это будет работать в большинстве случаев, за исключением 0, 0 % .25 = 0 - true, но если мы затем вернем 0, логически это будет читаться как false.Поэтому мы просто возвращаем немного больше нуля значение, так что оно читается как Long, а затем .toFixed() обрабатывает все остальное.

Если пользователь дергает ручку, он может пропустить необходимое значение и приземлиться в положение, котороене будет обновлять ручку.Это происходит еще больше, когда шаг значения равен .01 или .001.Либо значение пропускается, чтобы ускорить действие, либо что-то не успевает.

Надеюсь, это поможет.

...