jQuery mobile slider value reset to min or max

Question

I'm using a jquery mobile slider and I have a problem when the value that is entered into the text part of the control is outside of the range of the min and max values that I've set. When the control loses focus, it resets it's value to either the min or max value, whichever is closer to the invalid entered value.

The problem I have is that the user is keying in an invalid value, then clicking the form submit button, and thinking that the value that they've entered has been saved. However, because the slider resets the value to either min or max as soon as it loses focus when the submit button is clicked, this is the value that is actually saved, and not the user entered value.

If this situation arises, I'd like to pop up a message for the user so that they know they've entered an invalid value. Does anyone have any suggestions about how to achieve this? Testing the value in the .change event of the slider is no good as it returns the newly reset value.

Any help much appreciated.

Sample code, as requested:

<script type="text/javascript">
  $("#Answer").change(function() {
     alert($("#Answer").val()); // this value is already the adjusted value, rather than the user entered value
  });
</script>

<label for="Answer" class="ui-input-text"><%=question.Prompt%></label>
<br />
<span id="sliderspan">
   <input style="min-width: 3em;" type="range" name="Answer" id="Answer" value="<%=this.Value%>" min="<%=question.MinimumValue %>" max="<%=question.MaximumValue %>" step="0.1" />
   <span>&deg;<%=question.Units.ToString()%></span>
</span>

Answer 1

To do this, I suggest to bind to KeyUp event for Range input and store value to internal field (I used LastValue within input itself), then bind to Change event to compare LastValue with Min/Max value.

$("#Answer")
    .bind("keyup", function (e) {
    e.target.LastValue = $(e.target).val();
})
    .bind("change", function (e) {
    if (typeof e.target.LastValue == 'undefined') return;
    var min = parseInt(e.target.min);
    var max = parseInt(e.target.max);
    if (e.target.LastValue > max || e.target.LastValue < min)
        alert("Wrong Data!");
});

Answer 2

I found that binding to keyup or other events (change, etc) didn't fire. I suspect the widget is preventing the event propagating.

In my situation I want the user to be able to exceed the maximum, and for the slider to reset it's maximum if the user enters a larger value in the input field.

To do this I modified the slider code (jQuery Mobile 1.4.1) in the refresh function, after this line:

max = isInput ? parseFloat( control.attr( "max" ) ) : optionElements.length - 1;

Add this code:

if(control.val() > max) {
    max = parseFloat( control.val() );
    control.attr( "max", max );
}

In your situation you can then check the entered value before submitting and issue your warning and prevent the submit.

BTW if you are wondering how to change the library code, the best way is to excerpt just the slider widget into a new file, make your changes and load the new file AFTER you load jquery mobile. Your slider will override the jQuery mobile slider and if you upgrade jQuery mobile later, your slider will still override (depending on other changes to jQuery of course).