2

I am using Jquerymobile. I have a slider and a text box corresponding to that. As default functionality is given value shows in the text field when we move the slider as per the range we defined. But I want to show text instead of numbers. It's more like severity issues. i.e: when slider value will go to 30 it should display "less sever " in textbox and when it reaches to 50, text should change to "more sever".

3
  • If you post your code, or a jsbin.com of a what you currently have, it will help a lot.
    – Jeemusu
    Nov 20, 2012 at 9:26
  • <div data-role="content" data-theme="e"> <label for="slider-a">Elegir gravedad:</label> <input type="range" name="slider" id="slider-a" data-theme="b" data-track-theme="e" value="0" min="0" max="100" /> </div>
    – Fabre
    Nov 20, 2012 at 9:33
  • this is my slider code..
    – Fabre
    Nov 20, 2012 at 9:34

2 Answers 2

2

the solution of @Jeemusu did not work for me in all cases... I therefore modified it using this info:

<script>
$(document).bind('pageinit', function () {
  //depending on the device we have a touch or a mouse event
  var supportTouch = jQuery.support.touch,
      touchStartEvent = supportTouch ? "touchstart" : "mousedown",
      touchStopEvent  = supportTouch ? "touchend"   : "mouseup",
      touchMoveEvent  = supportTouch ? "touchmove"  : "mousemove";

  //the event is bound to the .ui-slider inside of the input type range
  $('#slider-a').siblings('.ui-slider').bind(touchStopEvent,function(){
    var sliderVal = $("#slider-a").attr('value');

    if(sliderVal <= 30) {
      $('#slider-phrase').html('normal');
    } else if(sliderVal >= 30 && sliderVal < 50) {
      $('#slider-phrase').html('less severe');
    } else if(sliderVal >= 50) {
      $('#slider-phrase').html('more severe');
    }
  });
});
</script>

see working example here

0
1

All you should have to do is look for the anchor (used for the slider) created by jQuery Mobile, and then bind a tap event to it. In the tap event you can check for the value using conditional statements and output them to the page like so:

$(document).ready(function() {

var sliderAnchor = $("#slider-a").closest('div').children('div').children('a');

  sliderAnchor.bind('tap',function(e){

    var sliderVal = $("#slider-a").attr('value');

    if(sliderVal <= 30) {
       $('#slider-phrase').html('normal');
    } else if(sliderVal >= 30 && sliderVal < 50) {
       $('#slider-phrase').html('less severe');
    } else if(sliderVal >= 50) {
       $('#slider-phrase').html('more severe');
    }

  });

});

A working example: http://jsbin.com/igugac/1/

1
  • +1 this solution gave me a good starting point for my solution, thank you!
    – Taifun
    Nov 20, 2012 at 21:47

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.