I'm a bit confused on how this works. I am trying to have the seconds value convereted to a "hh:mm:ss" in the input box when the slider is active.
Here the div displays the start time and end time in seconds. And adjusts as they slide
<div class='slider-example col-xs-12 col-sm-6 col-lg-5 center-block'>
<div class="well">
<input id="ex2" type="text" class="span2" value="[{{ start_length }},{{ end_length }}]" data-slider-min="{{ start_length }}" data-slider-max="{{ end_length }}" data-slider-step="1" data-slider-value="[{{ start_length }},{{ end_length }}]" data-slider-selection="after" data-slider-tooltip="hide"/>
</div> <!-- /well -->
</div> <!-- /slider example -->
<div class = "container col-xs-12 col-sm-6 col-lg-5 center-block">
<form class="form-inline">
<div class = "container col-xs-4">
<div class="form-group">
<label for="bar">Start:</label>
<input type="text" class="form-control" id="bar">
</div>
</div>
<div class = "container col-xs-4 pull-right">
<div class="form-group">
<label for="bar1">End: </label>
<input type="text" class="form-control" id="bar1">
</div>
</div>
</form>
</div>
Here is my javascript
<script type='text/javascript' src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script type='text/javascript' src="{{url_for('static', filename='js/bootstrap-slider.js')}}"></script>
<script type='text/javascript'>
function secondsTimeSpanToHMS(s) {
var h = Math.floor(s/3600);
s -= h*3600;
var m = Math.floor(s/60);
s -= m*60;
return h+":"+(m < 10 ? '0'+m : m)+":"+(s < 10 ? '0'+s : s);
}
$(document).ready(function(){
/* Example 2 */
$("#ex2").slider({});
$("#ex2").on('slide', function (ev) {
$('#bar').val(ev.value.slice(",")[0]);
$('#bar1').val(ev.value.slice(",")[1]);
document.getElementById('#bar').innerHTML = secondsTimeSpanToHMS('#bar');
document.getElementById('#bar1').innerHTML = secondsTimeSpanToHMS('#bar1');
});
});
</script>
I doubt it's doing what you intended, but here's what it's trying to do
$("#ex2").on('slide', function (ev) {
The slide event triggers when you slide the range handles and returns a 2 element array with the value of each handle
$('#bar').val(ev.value.slice(",")[0]);
$('#bar1').val(ev.value.slice(",")[1]);
This is an attempt to set the value of the element with id bar and bar1 to the range handle values - this will work if bar and bar1 are form elements (like a textbox, textarea...)
document.getElementById('#bar').innerHTML = ...
document.getElementById('#bar1').innerHTML = ...
This attempts to set the innerHTML of elements with id #bar and #bar1 - however since you are using document.getElementById, you should be using bar and bar1 instead of prefixing it with # (like you'd do for jQuery).
... = secondsTimeSpanToHMS('#bar');
... = secondsTimeSpanToHMS('#bar1');
I'd assume the above is an attempt to run the function using the range handle values, but the code is wrongly passing in jQuery selectors to these function - the function expects a value in seconds.
Finally, the secondsTimeSpanToHMS takes a seconds value and converts it to hour:minute:seconds
The below may be a bit closer to what you are looking for
$(document).ready(function () {
/* Example 2 */
$("#ex2").slider({});
$("#ex2").on('slide', function (ev) {
$('#bar').val(secondsTimeSpanToHMS(ev.value.slice(",")[0]));
$('#bar1').val(secondsTimeSpanToHMS(ev.value.slice(",")[1]));
});
});
Or alternatively, you could set another 2 element's innerHTML to the output of secondsTimeSpanToHMS and retain the .val() lines from the original function.