jQuery ui slider wrong ui values

Question

I initialize my slider like this:

  var min = 0.1;
  var max = 20;
  var low =  0.1;
  var high = 20;
  var step  = 0.1;

  $(this).slider({
      range: true,
      min: min, // 0.1
      max: max, // 20
      values: [ low, high ], // 0.1 | 20
      step: step, // 0.1
      animate: "slow",
      slide: function(event, ui) { ... }

Which was working perfeclty, except when my value max/high is 20. In this case inside the slide function I get the value 19,9 for ui.values[1]. As I need to prevent users from moving the second handle I was checking like this:

  if (ui.values[1] != high){
       return false;
  }

Now that 20 is not equal to 19,9 users aren't able to move any of the handles. Any ideas?

Possible duplicate of [Is floating point math broken?](http://stackoverflow.com/questions/588004/is-floating-point-math-broken) — CBroe, Mar 06 '17 at 13:20
Not sure if that fits. Although I am parsing floats (min, max, low, high), those values are **correct** when using `alert()`. It is only the ui.values[1], which is wrong I cannot influence at all? — 4ndro1d, Mar 06 '17 at 13:25
Using 20 directly doesnt change anything, see my edited question (variable init) — 4ndro1d, Mar 06 '17 at 13:27
And `ui.values[1]` originates where exactly? That presumably is a _calculated_ value as well. — CBroe, Mar 06 '17 at 13:38
You'd better use the values multiplied by 10 and assume that 1 stands for 0.1, 200 for 20 and so on. I think it can help. — Ararat Harutyunyan, Mar 06 '17 at 13:44
@AraratHarutyunyan that's what i did, thanks. Post as answer if you want it accepted — 4ndro1d, Mar 06 '17 at 14:28

Zorken17 · Answer 1 · 2017-03-06T13:58:49.430

1

The problem you are having is that you init min by 0.1 witch is a float value. If you init by 0 it will work. And also I think you should check this instead if (ui.values[1] == high)

  var min = 0;
  var max = 20;
  var low = 0.1;
  var high = 20;
  var step = 0.1;

  $("#slider").slider({
    range: true,
    min: min, // 0.1
    max: max, // 20
    values: [low, high], // 0.1 | 20
    step: step, // 0.1
    animate: "slow",
    slide: function(event, ui) {
      console.log(ui.values)
      if (ui.values[1] == high) {
        return false;
      }

    }
  });

<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" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css">

<div id="slider"></div>

edited Mar 06 '17 at 13:58

answered Mar 06 '17 at 13:55

Zorken17

1,896
1
10
16

The problem is that I need float values. And it seems they are causing troubles. Just figured that there are a lot of floats getting calculated wrong – 4ndro1d Mar 06 '17 at 13:58
And yes you seem to be right (at least for the numbers I tried). The 0 helps. problem is that the minimum value needs to vary between all positive floats up to a 1000. – 4ndro1d Mar 06 '17 at 14:01
But do you need a float as init value? – Zorken17 Mar 06 '17 at 14:01
Yeah the mninimum should always be the same as the lowest value – 4ndro1d Mar 06 '17 at 14:06

score 1 · Accepted Answer · answered Mar 06 '17 at 14:41

1

The problem can be in floating point numbers. So you'd better use the values multiplied by 10 and assume that 1 stands for 0.1, 200 for 20 and so on. Hope it will help.

answered Mar 06 '17 at 14:41

Ararat Harutyunyan

916
1
8
19

jQuery ui slider wrong ui values

2 Answers2