I am currently working on enhancing the user interface by implementing a feature where users can select a mobile number using a slider. The idea is that the user will choose a digit between 0 and 9 using the slider, then confirm their selection by pressing either the [space bar] or [esc] key. Once confirmed, the selected number should be displayed in a textbox or label field.
So far, I have been successful in allowing users to select a single number from the slider. Can anyone provide suggestions on how to bind events for selecting a phone number?
Specifically, I am looking to bind an event like this:
$("#PhNumber").on("slidestop", function (e) {
$("#output").html($("#PhNumber").val());
});
You can see my attempt in this fiddle: http://jsfiddle.net/8hphL2jp/13/
Below is the code snippet:
$("#PhNumber").on("slidestop", function (e) {
$("#output").html($("#PhNumber").val());
});
$("#PhNumber").on("focusin focusout", function (e) {
if (e.type == "focusin") {
$(this).on("change", function (e) {
$("#change").html($("#PhNumber").val());
});
} else {
$(this).off("change");
}
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div data-role="page">
<label for="PhNumber">Phone Number</label>
<input type="range" name="PhNumber" id="PhNumber" value="0" min="0" max="9" />
<div>Slidestop:<span id="output">---</span>
</div>
<div>Input:<span id="change">---&span>
</div>
</div>