`onstatechange` funciton in JSlider is not working properly

Question

I'm using egorkhmelev's slider, in its arguments we can pass function named onstatechange(works when handle is dragged). I want the min and max value on this function. following is my code(fiddle): JQ:

jQuery("#Slider2").slider({
    from: <?= $mn?>, 
    to: <?= $mx?>, 
    step: 1,
    round: 1, 
    skin: 'plastic',
    limits:true,
    heterogeneity: ['90/50000'],
    onstatechange:function(){console.log($('#Slider2').slider("value"))},
});

HTML:

<span style="display: inline-block; width: 200px; padding: 0 5px;"><input id="Slider2" type="slider" name="price" value="<?= $mn?>;<?= $mx ?>" /></span>

it is logging the maximum and minimum values, but problem is it is creating another slider all by itself. so i've no idea how to stop that. this is my fiddle, if you check this fiddle, there are two ranges coming one is from 0 to 10 and another is 0 to 100. so this 0 to 10 came by itself. how to fix this. please help

Answer 1

Change the onstatechange function like so:

jQuery("#Slider2").slider({
  from: 0, 
  to: 100, 
  step: 1,
  round: 1, 
  skin: 'plastic',
  limits:true,
  heterogeneity: ['90/50'],
  onstatechange:function(value){console.log(value)},
 });

You were creating a new slider with default values in your code in the onstatechange function.

Fiddle here.