Ползунок пользовательского интерфейса jQuery не работает для всех десятичных значений

Question

Я сделал слайдер, используя слайдер пользовательского интерфейса jQuery для некоторых переменных из json. Это мой код

$( "#slider_" + hashmap[this.value].name).slider({
                    range: true,
                    min: hashmap[this.value].prop[0],
                    max: hashmap[this.value].prop[1],
                    values: [ hashmap[this.value].prop[0], hashmap[this.value].prop[1]],
                    slide: function( event, ui ) { 
                      tooltipmin.text(ui.values[0]);
                      tooltipmax.text(ui.values[1]);
                    },
                    change: function(event,ui){
                      var range_value = $(this).slider('values')
                      var name = $(this).attr('id').substring($(this).attr('id').indexOf("_")+1)
                      var type = 'quant';
                      tooltipmin.text(ui.values[0]);
                      tooltipmax.text(ui.values[1]);
                      filterValues(name, range_value, type)
                    }

JSON

{
        "type": "quant",
        "name": "dmin",
        "prop": [
            0.0009815,
            1.58
        ]
    },
{
        "type": "quant",
        "name": "horizontalError",
        "prop": [
            0.1,
            10.6
        ]
    },
 {
        "type": "quant",
        "name": "magError",
        "prop": [
            0.0,
            1.34
        ]
    },
{
        "type": "quant",
        "name": "rms",
        "prop": [
            0.0,
            0.87
        ]
    },

Код работает нормально для большинства переменных (ошибка по горизонтали). Но странно, что это не работает для других переменных, чьи имена "rms", "dmin" и "magError". Для этих трех переменных ползунок не работает вообще. Ручки заморожены в минимальной и максимальной позиции. Даже консоль не выдает никакой ошибки. Может кто-нибудь сказать мне, что я делаю не так?

Answer 1

Я подозреваю, что вам нужно правильно настроить min, max и step. В большинстве случаев min будет 0, а max и step будут несколько переменными. Вы можете рассмотреть возможность использования Math.ceil() следующим образом:

var hashmap = [{
    "type": "quant",
    "name": "dmin",
    "prop": [
      0.0009815,
      1.58
    ]
  },
  {
    "type": "quant",
    "name": "horizontalError",
    "prop": [
      0.1,
      10.6
    ]
  }, {
    "type": "quant",
    "name": "magError",
    "prop": [
      0.0,
      1.34
    ]
  }, {
    "type": "quant",
    "name": "rms",
    "prop": [
      0.0,
      0.87
    ]
  }
];

$(function() {
  $(".slide").slider({
    range: true,
    min: 0,
    max: 1,
    step: .00001,
    create: function(e, ui) {
      var slide = $(this);
      var type = "quant";
      var name = slide.attr("name");
      var props = hashmap[slide.data("id")].prop;
      slide.slider("option", {
        min: 0,
        max: Math.ceil(props[1]),
        values: props
      });
      slide.next("p").html("Values: <span>[" + props.join(", ") + "]</span>; Min: 0, Max: " + Math.ceil(props[1]));
    },
    slide: function(e, ui) {
      var slide = $(this);
      slide.next("p").find("span").html("[" + ui.values.join(", ") + "]")
    }
  });
});

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div id="slider-1" class="slide" data-id="0" name="dmin"></div>
<p>Values:</p>

<div id="slider-2" class="slide" data-id="1" name="horizontalError"></div>
<p>Values:</p>

<div id="slider-3" class="slide" data-id="2" name="magError"></div>
<p>Values:</p>

<div id="slider-4" class="slide" data-id="3" name="rms"></div>
<p>Values:</p>

Если вы можете, я бы скорректировал ваши данные JSON, чтобы включить больше деталей для ползунков. Что-то вроде:

{
  "type": "quant",
  "name": "dmin",
  "props": {
    "min": 0,
    "max": 5,
    "step": .00001
    "values": [
      0.00098,
      1.58
    ]
  }
};