jQuery Slider with Feet and Inches

Question

I'm using the JQuery slider for a width range. Here's my HTML:

<div id="divWidth">
    Width:
    <div>
        <input type="text" class="sliderValue" data-index="0" value="10" id="txtWidthFt0"
            runat="server" style="width: 20px" />'
        <input type="text" class="sliderValue" data-index="0" value="10" id="txtWidthIn0"
            runat="server" style="width: 20px" />" to
        <input type="text" class="sliderValue" data-index="1" value="10" id="txtWidthFt1"
            runat="server" style="width: 20px" />'
        <input type="text" class="sliderValue" data-index="1" value="10" id="txtWidthIn1"
            runat="server" style="width: 20px" />"
    </div>
    <br />
    <div id="sliderWidth">
    </div>
</div>

I was able to get the textbox values to change as the slider moves. I need help doing it the other way around - changing the slider values as the textbox values change.

Here's my current javascript, which I tweaked from this post:

<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script type="text/javascript">

    function getFeet(n) {
        return Math.floor(n / 12);
    }
    function getInches(n) {
        return (n % 12);
    }

    $(document).ready(function () {
        $("#sliderWidth").slider({
            min: 1,
            max: 500, 
            range: true,
            values: [1, 500],
            slide: function (event, ui) {
                for (var i = 0; i < ui.values.length; ++i) {
                    $("#txtWidthFt" + i).val(getFeet(ui.values[i]));
                    $("#txtWidthIn" + i).val(getInches(ui.values[i]));
                }
            }
        });

        // need help here:
        $("#divWidth input").change(function () {
            var $this = $(this);
            $("#sliderWidth").slider("values", ?);
        });
    });

</script>

I know I can add a change event for each textbox and do it that way. I'm looking for a way to do it without having an event for each textbox / with less code. Any help is appreciated.

So it looks like you slider is just in inches, correct? So take the value from the feet box, multiple by 12 and add the value from the inches box. — Matt Burland, Jan 14 '13 at 20:15
@MattBurland Thanks - I get the math part, see my last paragraph in OP. — Rivka, Jan 14 '13 at 20:17
You've already added a handler to every `input` under the `#divWidth` div with the code snippet you added. I'm not sure how much less code you want? You can attach to the parent div instead of each input if you prefer and rely on events bubbling up. — Matt Burland, Jan 14 '13 at 20:20
@MattBurland Yes, I've added an event handler for each one, but how do I get the correct values from each TextBox and update the slider accordingly from that event handler? (Sorry, if I'm not being clear) — Rivka, Jan 14 '13 at 20:23
You set them using `$("#txtWidthFt" + i).val(getFeet(ui.values[i]));` you can retrieve the values with `var ft = +$("#txtWidthFt0").val();` and similar with the inches textbox. Then, like I said, multiple feet by 12 and add the inches. I'm not sure why you have two sets of inputs that appear to be set with the same value. — Matt Burland, Jan 14 '13 at 20:28

Syon · Accepted Answer · 2013-01-14T20:40:09.343

1

Try this:

$("#divWidth input").blur(function () {
  var $this = $(this),
      startFt = parseInt($('#txtWidthFt0').val()),
      startIn = parseInt($('#txtWidthIn0').val()),
      startTotal = (startFt * 12) + startIn,
      endFt = parseInt($('#txtWidthFt1').val()),
      endIn = parseInt($('#txtWidthIn1').val()),
      endTotal = (endFt * 12) + endIn;
  $("#sliderWidth").slider('values',0,startTotal);
  $("#sliderWidth").slider('values',1,endTotal);
});

And here's a jsFiddle

edited Jan 14 '13 at 20:40

answered Jan 14 '13 at 20:33

Syon

1,604
13
16

This worked. Thanks to all - I was definitely doing something wrong because the numbers weren't addingup. – Rivka Jan 14 '13 at 20:48

score 1 · Answer 2 · answered Jan 14 '13 at 20:33

Try this fiddle.

Html:

<body>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
  <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
</body>
<div id="divWidth">Width:
  <div>
    <input type="text" class="sliderValue" data-index="0" value="10" id="txtWidthFt0"
    runat="server" style="width: 20px" />'
    <input type="text" class="sliderValue" data-index="0" value="10" id="txtWidthIn0"
    runat="server" style="width: 20px" />" to
    <input type="text" class="sliderValue" data-index="1" value="10" id="txtWidthFt1"
    runat="server" style="width: 20px" />'
    <input type="text" class="sliderValue" data-index="1" value="10" id="txtWidthIn1"
    runat="server" style="width: 20px" />"</div>
  <br />
  <div id="sliderWidth"></div>
</div>

JS:

function getFeet(n) {
  return Math.floor(n / 12);
}

function getInches(n) {
  return (n % 12);
}

function setInputs(values) {
  $("#txtWidthFt0").val(getFeet(values[0]));
  $("#txtWidthIn0").val(getInches(values[0]));
  $("#txtWidthFt1").val(getFeet(values[1]));
  $("#txtWidthIn1").val(getInches(values[1]));
}

$(document).ready(function () {
  $("#sliderWidth").slider({
    min: 1,
    max: 500,
    range: true,
    values: [1, 500],
    slide: function (event, ui) {
        setInputs(ui.values);
    }
  });

  $("#divWidth input").change(function () {
    var startFeet = parseInt($("#txtWidthFt0").val());
    var startInches = parseInt($("#txtWidthIn0").val());
    var endFeet = parseInt($("#txtWidthFt1").val());
    var endInches = parseInt($("#txtWidthIn1").val());
    var start = (startFeet * 12) + startInches;
    var end = (endFeet * 12) + endInches;

    $("#sliderWidth").slider("values", [start, end]);
  });

  var values = $("#sliderWidth").slider("values");
  setInputs(values);
});

jQuery Slider with Feet and Inches

2 Answers2