Question

I am using Jquery UI Range Slider with fixed minimum (http://jqueryui.com/slider/#rangemin) for a user to select a maximum journey length in hours. The slider ranges from 0hours - 48 hours. I need the word "hours" to change to "hour" when it is less than or equal to 1. Please see my example here: http://jsfiddle.net/t69wg/1/

My jquery:

$(function () {
$("#slider-range-min").slider({
    range: "min",
    value: 24,
    min: 1,
    max: 48,
    slide: function (event, ui) {
        $("#amount").text(ui.value + $timeUnit);
    }
});

$timeUnit = " hours";


$("#amount").text($("#slider-range-min").slider("value") + $timeUnit);
});

I think I would use an if else statement, something like:

if (value < 0) {
    $timeUnit = " hour";
}else {
    $timeUnit = " hours";
};

I am new to jquery so sorry for stupid question!

Was it helpful?

Solution

On slide callback, you can use:

--DEMO--

$timeUnit = ui.value > 1 ? " hours" :  " hour";

OTHER TIPS

  $(function () {

$("#slider-range-min").slider({
    range: "min",
    value: 24,
    min: 1,
    max: 48,
    slide: function (event, ui) {

$timeUnit=(ui.value <=1)?" hour":" hours";

});
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top