CODEWITHSUNDEEP
jquery-mobile
Shoreki
Shoreki

Reputation: 1097

Customizing jQuery Mobile Rangeslider Widget

I am using jquery mobile rangeslider for accepting a time range in a hybrid app. Can I customize the events/ properties of Rangeslider Widget so that my Widget will be like enter image description here

If not possible, can anyone suggest an alternate control/widget for this?

Upvotes: 0

Views: 88

Answers (1)

ezanker
ezanker

Reputation: 24738

The jQM rangeslider does not support time ranges out-of-the-box. However, you can add some script, CSS, and a couple of type="time" inputs to accomplish your goal.

Working DEMO

For the HTML, I have created a table with 1 row and 3 columns. The rangeslider goes in the middle column while the low and high time inputs go in the 1st and 3rd columns respectively. The middle column automatically stretches with the page width.

<table id="theTimeRange">
    <tr>
        <td>
            <input data-mini="true" class="timeInp" type="time" id="t1" value="06:30" data-timeinputid="range-1a" />
        </td>
        <td>
            <div data-role="rangeslider" data-mini="true">
                <label for="range-1a"></label>
                <input type="range" name="range-1a" id="range-1a" min="0" max="1439" value="0" data-timeinputid="t1" class="timeRange" />
                <label for="range-1b"></label>
                <input type="range" name="range-1b" id="range-1b" min="0" max="1439" value="1" data-timeinputid="t2" class="timeRange" />
            </div>
        </td>
        <td>
            <input data-mini="true" class="timeInp" type="time" id="t2" value="16:00" data-timeinputid="range-1b" />
        </td>
    </tr>
</table>

I have assigned the class timeInp to the 2 type="time" inputs and the class timeRange to the 2 type="range" inputs for convenience when attaching events. I have also used data-attributes to associate the each time input with its range input (e.g. data-timeinputid="t1").

The CSS makes sure the table stretches to the page width. It hides the default number inputs and it removes the default margins:

#theTimeRange {
    width: 100%;
}
#theTimeRange tr > td:first-child, #theTimeRange tr > td:last-child {
    width: 110px;
}
#theTimeRange input[type='number'] {
    display: none;
}
#theTimeRange .ui-rangeslider-sliders {
    margin: 0;
}

Finally, I put script in the pagecreate event of the jQM page. This script initializes the rangeslider to match the times in the time inputs. Then there are change handlers on both the time inputs and the range inputs that convert between time and integer minutes to sync in both directions. The user can update either the time inputs, or drag the slider.

$(document).on("pagecreate", "#page1", function(){

    $(".timeRange").on("change", function(e){
        var val = $(this).val();
        var timeid = $(this).jqmData("timeinputid");
        var d = MinutesToTime(val);
        $("#" + timeid).val(d);
    });

    $(".timeInp").on("change", function(e){
        var val = $(this).val();
        console.log(val);
        var timeid = $(this).jqmData("timeinputid");
        var d = TimeToMinutes(val);
        console.log(d);
        $("#" + timeid).val(d)
        $('#theTimeRange [data-role="rangeslider"]').rangeslider("refresh");
    });

    //sync rangeslider to inputs at page create
    $(".timeInp").each(function(idx){
        var val = $(this).val();
        var timeid = $(this).jqmData("timeinputid");
        var d = TimeToMinutes(val);
        $("#" + timeid).val(d)            
    });
    $('#theTimeRange [data-role="rangeslider"]').rangeslider("refresh");

});

function MinutesToTime(val){
    var hours = parseInt( val / 60 );
    var min = val - (hours * 60);
    var time = (hours < 10 ? '0' + hours: hours) + ':' + (min < 10 ? '0' + min : min);
    return time;
}

function TimeToMinutes(val){
    var res = val.split(":");
    var h = parseInt(res[0]);
    var m = parseInt(res[1]);
    return (h * 60) + m;
}

Another link to the DEMO

Upvotes: 1

Related Questions