Setting jquery mobile sliders leads to error

Question

I am trying to set the value of a slider in jQuery mobile 1.4.5, JQ 2.1.4 and do get this error:

Error: no such method 'values' for slider widget instance

HTML Code:

<div data-role="rangeslider" id="filter_price" style="touch-action: none;">
    <input type="range" name="price_from" id="price_from" min="0" max="30000" step="250"  data-popup-enabled="true">
    <input type="range" name="price_to" id="price_to" min="0" max="30000" step="250"  data-popup-enabled="true">
</div>

jquery:

   $('#filter_price').slider();
   $('#filter_price').slider('values', 0,  50);  
   $('#filter_price').slider('values', 1,  100);

This looks exactly like in the answer provided on SO a few years ago, but might be outdated as it is from 8 years old.

While the accepted answer is referring to [jQuery-UI](https://jqueryui.com/slider/#range) Your question is clearly about [jQuery Mobile 1.4.5](http://demos.jquerymobile.com/1.4.5/rangeslider/). Be aware, these are two different libraries with different `rangeslider` implementation. — deblocker, Mar 27 '19 at 13:35

score 2 · Accepted Answer · answered Mar 27 '19 at 12:19

There's a couple of problems here. Firstly you've created some range inputs inside the div you're instantiating the slider on. This is only going to cause problems as they interfere with the slider layout. I'd suggest removing them.

Secondly, calling values with two arguments is intended to be used with a range slider, not a single value slider. I would assume from the two range inputs you had in the DOM you're attempting to make this a range selection. As such you need to set range: true on the slider when you create it. Then you can call values as you currently are. Try this:

$('#filter_price').slider({
  range: true,
  min: 0,
  max: 150
});
$('#filter_price').slider('values', 0, 50);
$('#filter_price').slider('values', 1, 100);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css" />
<div data-role="rangeslider" id="filter_price" style="touch-action: none;">
</div>

Also note that if you're attempting to create the slider with these values you can provide all arguments in the instantiation object, without needing to select the element again:

$('#filter_price').slider({
  range: true,
  min: 0,
  max: 150,
  values: [50, 100]
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css" />
<div data-role="rangeslider" id="filter_price" style="touch-action: none;">
</div>

deblocker · Answer 2 · 2019-04-02T03:52:27.777

I am a little bit too late to the party, but here is the solution for the jQuery Mobile 1.4.5 rangeslider (not jQuery-UI).

As the JQM rangeslider is effectively built on top of two JQM sliders, You can programmatically set the min and max values inside these two create events:

var range = {
  "low": {min: 1, max: 10000}, 
  "medium": {min: 10000, max: 20000}, 
  "high": {min: 20000, max: 30000}
};

$(document).on("slidecreate", "#price_from", function(e) {
  $(this).val(range["medium"].min);
});

$(document).on("slidecreate", "#price_to", function(e) {
  $(this).val(range["medium"].max);
});

$(document).on("rangeslidercreate", "#filter_price", function(e) {
  // rangeslider has been created
});

$(document).on("change", "input:radio[name='price-range']", function() {
  $("#price_from").val(range[this.value].min);
  $("#price_to").val(range[this.value].max);
  $("#filter_price").rangeslider("refresh");
});

.ui-slider-popup {
  width: auto !important;
  padding: 14px 8px 0 !important;
}

.ui-grid-a .ui-block-a,
.ui-grid-a .ui-block-b {
  text-align: center;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
  <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css">
  <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
  <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js"></script>
</head>
<body>
  <div id="page-one" data-role="page">
    <div data-role="header">
      <h3>Header</h3>
    </div>
    <div role="main" class="ui-content">
      <br>
      <div class="ui-grid-a">
        <div class="ui-block-a">
          <div data-role="rangeslider" id="filter_price" style="touch-action: none;">
            <input type="range" name="price_from" id="price_from" min="0" max="30000" step="250"  data-popup-enabled="true">
            <input type="range" name="price_to" id="price_to" min="0" max="30000" step="250"  data-popup-enabled="true">
          </div>
        </div>
        <div class="ui-block-b">
          <fieldset data-role="controlgroup" data-type="horizontal" data-mini="true">
            <input name="price-range" id="price-range-low" value="low" type="radio">
            <label for="price-range-low">Low</label>
            <input name="price-range" id="price-range-medium" value="medium" type="radio" checked="checked">
            <label for="price-range-medium">Medium</label>
            <input name="price-range" id="price-range-high" value="high" type="radio">
            <label for="price-range-high">High</label>
          </fieldset>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

Setting jquery mobile sliders leads to error

2 Answers2