jQuery Range Slider using default attribute values

Question

I am using jquery Range Slider which has the following code.

$("#maxAge").slider({
    range: true,
    min: 18,
    max: 75,
    values: [20, 45],
    slide: function(event, ui) {
      $("#sliderVal").val(ui.values[0] + "-" + ui.values[1]);
    }
});
$("#sliderVal").val($("#maxAge").slider("values", 0) + "-" + $("#maxAge").slider("values", 1));

<div id="maxAge" min="35" max="75" minVal="25" maxVal="45"></div>
<input type="text" class="slider-text text-right gradient-text mt-2" id="sliderVal" readonly>

I want to use it like this:

$("#maxAge").slider({
    range: true,
    min: $(this).attr('min'),
    max: $(this).attr('max'),
    values: [$(this).attr('minVal'), $(this).attr('maxVal')],
    slide: function(event, ui) {
      $("#sliderVal").val(ui.values[0] + "-" + ui.values[1]);
    }
});

I want to fetch the attribute values from the DIV and use it here so that I can later change the attribute values using PHP.

score 1 · Accepted Answer · answered May 23 '21 at 12:10

You can get value of attribute using your_div_id and then use parseInt() to parse string as integer.

Demo Code :

$("#maxAge").slider({
  range: true,
  min: parseInt($("#maxAge").attr('min')), //get it like this and then pasre it..as integer
  max: parseInt($("#maxAge").attr('max')),
  values: [parseInt($("#maxAge").attr('minVal')), parseInt($("#maxAge").attr('maxVal'))],
  slide: function(event, ui) {
    $("#sliderVal").val(ui.values[0] + "-" + ui.values[1]);
  }
});

<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="maxAge" min="18" max="75" minVal="20" maxVal="45"></div>
<input type="text" class="slider-text text-right gradient-text mt-2" id="sliderVal" readonly>

score 1 · Answer 2 · answered May 23 '21 at 16:29

Consider the following example that makes use of Data Attributes.

$(function() {
  $("#maxAge").slider({
    range: true,
    min: $("#maxAge").data('min'),
    max: $("#maxAge").data('max'),
    values: [
      $("#maxAge").data("min-value"),
      $("#maxAge").data('max-value')
    ],
    slide: function(event, ui) {
      $("#sliderVal").val(ui.values[0] + "-" + ui.values[1]);
    }
  });
  $("#sliderVal").val($("#maxAge").data("min-value") + "-" + $("#maxAge").data('max-value'));
});

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.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="maxAge" data-min="18" data-max="75" data-min-value="20" data-max-value="45"></div>
<input type="text" class="slider-text text-right gradient-text mt-2" id="sliderVal" readonly />

Data Attributes are a commonly used method to store data that is related to an element. You can easily call it using jQuery .data().

See More:

https://api.jquery.com/data/

I have already found the solution from Swati's answer.. However, I see in the snippet that your solution works equally good too.. Therefore, +1 for you :) — Mr. Crypto, May 23 '21 at 16:32

jQuery Range Slider using default attribute values

2 Answers2