Форум

Faab · #1 (**permalink**) 10.01.2014, 00:01

Нужен слайдер, который бы плавал между точно указанными значениями. Например

[25, 26.78, 29.99, 35, 45.99]

Смотрю существующие плагины, там везде надо указывать шаг. А шаг у меня, как видите переменчив. Есть какое-нибудь решение для моей задачи? Спасибо

рони · #2 (**permalink**) 10.01.2014, 00:13

Faab,
то есть чтобы можно было выбрать только эти 5 значений?

Faab · #3 (**permalink**) 10.01.2014, 00:47

Да... что бы тоже было минимальное и максимальное значения, и что бы он принимал только точно указанные значения.

Faab · #4 (**permalink**) 10.01.2014, 01:11

Рони, плагины для такой задачи есть или начать искать другие варианты решения такой задачи? Сам рабочий слайдер я врядли построю.

рони · #5 (**permalink**) 10.01.2014, 04:15

Faab,
есть плагины надо только поискать, ниже вариант несамого простого решения

из обычного слайдера http://api.jqueryui.com/slider/

Faab · #6 (**permalink**) 10.01.2014, 15:13

Да, с JQuery UI оказывается можно настроить подобным образом слайдер.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Slider - Range slider</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
  <script>
$(function() {
  
  function findNearest(includeLeft, includeRight, value, values) {
    var nearest = null;
    var diff = null;
    for (var i = 0; i < values.length; i++) {
      if ((includeLeft && values[i] <= value) || (includeRight && values[i] >= value)) {
        var newDiff = Math.abs(value - values[i]);
        if (diff == null || newDiff < diff) {
          nearest = values[i];
          diff = newDiff;
        }
      }
    }
    return nearest;
  };
  
  function fFireChanging(valueLeft, valueRight){
    console.log('valueLeft: ' + valueLeft);
    console.log('valueRight: ' + valueRight);
  };
      
  $(document).ready(function() {
    console.log('filter-script start');
    
    var values = [0, 50, 110, 115, 135, 145, 185, 210, 240, 265, 285, 315, 375, 395, 415, 425, 455, 500];
    var iInitValueLeft = 0;
    var iInitValueRight = 500;
    
    var slider = $( "#slider-range" ).slider({
      range: true,
      min: 0,
      max: 500,
      values: [0, 500],
      slide: function( event, ui ) {
        var includeLeft = event.keyCode != $.ui.keyCode.RIGHT;
        var includeRight = event.keyCode != $.ui.keyCode.LEFT;
        var value = findNearest(includeLeft, includeRight, ui.value, values);
        if (ui.value == ui.values[0]) {
          slider.slider('values', 0, value);
          ui.values[ 0 ] = value;          
        }
        else {
          ui.values[ 1 ] = value;
          slider.slider('values', 1, value);
        }
        $( "#amount" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
        
      },
      change: function(event, ui) {
        var includeLeft = event.keyCode != $.ui.keyCode.RIGHT;
        var includeRight = event.keyCode != $.ui.keyCode.LEFT;
        var value = findNearest(includeLeft, includeRight, ui.value, values);
        if (ui.value == ui.values[0] && value != iInitValueLeft) {
          iInitValueLeft = value;
          fFireChanging(iInitValueLeft, iInitValueRight)      
        } else if (ui.value == ui.values[1] && value != iInitValueRight) {
          iInitValueRight = value;
          fFireChanging(iInitValueLeft, iInitValueRight) 
        };
      }
    });
    
    slider.slider();

    $( "#amount" ).val( "$" + $( "#slider-range" ).slider( "values", 0 ) +
      " - $" + $( "#slider-range" ).slider( "values", 1 ) );
  });    
});
  </script>
</head>
<body>
 
<p>
  <label for="amount">Price range:</label>
  <input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;">
</p>
 
<div id="slider-range"></div>
 
 
</body>
</html>

Решение базируется на скрипте, опубликованном тут (stackoverflow.com) Только надо ещё продумать как использовать числа с запятой.

Форум

Справочник

Discord чат

Курсы javascript