JSF - range slider with time values

Question

I have a JSF webapp with Primefaces 3.5, and I would like to have a range slider, but with time values ​​(hour: minute) .. like in this picture

slider http://img547.imageshack.us/img547/3112/timeslider.jpg

this is the code for a range slider with integer values:

<h:panelGrid columns="1" style="margin-bottom:10px"> <h:outputText id="displayRange" value="Between #{sliderBean.number6} and #{sliderBean.number7}"/> <p:slider for="txt6,txt7" display="displayRange" style="width:400px" range="true" displayTemplate="Between {min} and {max}"/> </h:panelGrid> <h:inputHidden id="txt6" value="#{sliderBean.number6}" /> <h:inputHidden id="txt7" value="#{sliderBean.number7}" /> 

where sliderBean.number6 and sliderBean.number7 are integers .. I think that what I want to do is to override the jquery slide function that displays range values ​​and work with "minutes" instead of "hours".

  $(function() { $(".slider-range").slider({ range: true, min: 0, max: 1440, step: 15, slide: function(e, ui) { var hours = Math.floor(ui.value / 60); var minutes = ui.value - (hours * 60); if(hours.length == 1) hours = '0' + hours; if(minutes.length == 1) minutes = '0' + minutes; $('#displayRange').html(hours+':'+minutes); } }); }); 

but .. honestly .. I don’t know how to do it .. (and if this is the right way ..) thanks!

Answer 1

I put together a fiddle that uses jQRangeSlider and momentjs

http://jsfiddle.net/tPMsv/7/

 $("#slider").dateRangeSlider({ bounds: { min: moment().startOf("day").toDate(), max: moment().endOf("day").toDate() }, defaultValues: { min: moment().startOf("day").add("hours",6).toDate(), max: moment().endOf("day").subtract("hours",6).toDate() }, formatter: function (value) { return moment(value).format("HH:mm"); } }); 

I use momentjs because it is a great library for handling datetime values ​​in javascript, but you do not need to use it if you are familiar with another library or just want to deal with your own functions.

Please let me know if you have any questions.