All geek questions in one place

JQuery Set Slider Value

I have one slider to select a time range, from 1 (, 2,3, ..) day (, weeks, months, ..) to the present. It sets the time and date on the inputs and works with this code.

<div id="inputs" style="margin-top: 10px;"> <div style="margin-top: 0px; margin-bottom: 2px;"> <input type="text" name="date_start" id="date_start" style="width: 59%;" value="TEMPlate_date_start;"> <input type="text" name="time_start" id="time_start" style="width: 30%;" value="TEMPlate_time_start;"> </div> <div style="margin-top: 2px; margin-bottom: 2px;"> <input type="text" name="date_end" id="date_end" style="width: 59%;" value="TEMPlate_date_end;"> <input type="text" name="time_end" id="time_end" style="width: 30%;" value="TEMPlate_time_end;"> </div> </div> <!-- Here is DIV with SLIDER --> <div style="margin-top: 6px;margin-bottom: 45px;"> <div id="slider" style="width: 90%;"></div> </div> <!-- Here is flying DIV with slider value --> <div id="amount" style="font-size: 13px;height: 15px;padding: 5px;width: 70px;position: relative;top: -25px;margin-bottom: -25px;color:#666;border:1px solid #CCC;background-color: #EEE; border-radius:5px;">Last 1 hour</div> <script type="text/javascript"> var mouseX = 0; var mouseY = 0; $(document).mousemove( function(e) { mouseX = e.pageX; mouseY = e.pageY; }); function leadingZero(value) { return (value<10||value.length==1)? '0'+value : value; } // maximum value of slider var slider_max = TEMPlate_slider_max; // How many buttons are under slider var slider_options_count = TEMPlate_slider_options_count; // Unit for each of the button under slider var range_units = new Array('hours', 'days', 'weeks', '* 30 days'); // How many times is value of button under slider bigger then 1second var range_multipliers = new Array(60*60, 60*60*24, 60*60*24*7, 60*60*24*30); $( "#slider" ).slider({ //value:100, min: 0, max: slider_max, step: 1, values: [0], slide: function( event, ui ) { var range_value = ui.value; var option_size = slider_max/slider_options_count; var range = Math.floor(range_value / (option_size)); if(range_value == slider_max ) range--; var value = (range_value - range*option_size) + 1; // set time_end and date_end with actual date/time var date = new Date(); $("#time_end").val( leadingZero(date.getHours())+":"+leadingZero(date.getMinutes()) ); $("#date_end").val( leadingZero(date.getDate()) + "/" + leadingZero((date.getMonth()+1)) + "/" + date.getFullYear() ); // calculate starting timestamp date.setTime( (date.getTime()/1000 - value*range_multipliers[range])*1000 ); // setting time_start and date_start with starting timestamp $("#time_start").val( leadingZero(date.getHours())+":"+leadingZero(date.getMinutes()) ); $("#date_start").val( leadingZero(date.getDate()) + "/" + leadingZero(date.getMonth()+1) + "/" + leadingZero(date.getFullYear()) ); // set amount value $("#amount").css('width', 'auto'); $("#amount").text("Last "+value+" "+ range_units[range] ); // set amount css if( $("#amount").css('position') != 'absolute' ) { $("#amount").css('position', 'absolute'); $("#inputs").css('margin-top', '55px'); } $("#amount").css('top', $("#slider").offset().top+30); //if( $.browsr.msie ) $("#amount").css('top', $("#slider").offset().top+20); // count left position var left = mouseX; if( parseInt($("#amount").offset().left) < parseInt(left-10) ) left = $("a.ui-slider-handle").offset().left+10; if( parseInt($('#amount').width()+left) > parseInt($("#slider").offset().left+$("#slider").width()) ) { left = $("#slider").offset().left+$("#slider").width()-$("#amount").width(); } $("#amount").css('left', left); } }); </script>

The problem is that I have four buttons above the slider with predefined values, they set the inputs, but I can not set the slider: - /. These are buttons

  <div style="margin-top: 5px; margin-bottom: 2px;"> <input type="button" class="ts" value="Last 24h" onclick="$('#slider').slider('option', 'value', 0);$('#slider').slider('refresh');$('#date_start').val('TEMPlate_l24h_start;');$('#date_end').val('TEMPlate_l24h_end;');$('#time_start').val('TEMPlate_time_end;');$('#time_end').val('TEMPlate_time_end;')"> <input type="button" class="ts" value="Last 2d" onclick="$('#date_start').val('TEMPlate_l2d_start;');$('#date_end').val('TEMPlate_l2d_end;');$('#time_start').val('TEMPlate_time_end;');$('#time_end').val('TEMPlate_time_end;')"> <input type="button" class="ts" value="Last 1w" onclick="$('#date_start').val('TEMPlate_l1w_start;');$('#date_end').val('TEMPlate_l1w_end;');$('#time_start').val('TEMPlate_time_end;');$('#time_end').val('TEMPlate_time_end;')"> <input type="button" class="ts" value="Last 30d" onclick="$('#date_start').val('TEMPlate_l1m_start;');$('#date_end').val('TEMPlate_l1m_end;');$('#time_start').val('TEMPlate_time_end;');$('#time_end').val('TEMPlate_time_end;')"> </div>

I tried various commands in the onclick attribute, I tried to force a click on the slider through the event, I tried to force the "slide" event, set the value, nothing works :(

I tried this in the firebug console:

 var e = jQuery.Event("click"); e.pageX = $('#slider').offset().left+100; e.pageY = $('#slider').offset().top+7; $('#slider').trigger(e); $('#slider').slider('value', 2 ); $('#slider').slider( {value: 2} ); $('#slider').slider('option', 'value', 2 ); $('#slider').val( 2 ); $("#slider").trigger("slide"); var e = jQuery.Event("slide"); e.pageX = $('#slider').offset().left+100; e.pageY = $('#slider').offset().top+7; $('#slider').trigger(e);

I really don't know what I'm doing wrong, can someone help me? Thanks

+6
source share
1 answer

The essence of your problem is that you specify the parameter values: [0] for the parameters of the slider when you really need a single version.

i.e. value: 0

You also define a gigantic, cumbersome function for the slide callback, not the change callback (which is called the callback if the value changes programmatically). To do this, try reorganizing this giant callback into your own function and specify that in the slider setting:

eg.

 function sliderChange(event, ui) { // big chunk of code here } $("#slider").slider({ min: 0, max: slider_max, step: 1, value: 0, slide: sliderChange, change: sliderChange });

You will then need to modify this function to make sure that it does not use the mouseX coordinates to set the position of the #amount div, as this will not be valid if you programmatically set the value of the buttons.

Finally, you can use $('#slider').slider('value', <some_value>); to set the value. I recommend not using the onclick attribute and refactoring it to something like:

 $('input.ts').click(function() { var btnText = $(this).val(); if (btnText == 'Last 24h') { $('#slider').slider('value', 0); $('#date_start').val('TEMPlate_l24h_start;'); $('#date_end').val('TEMPlate_l24h_end;'); $('#time_start').val('TEMPlate_time_end;'); $('#time_end').val('TEMPlate_time_end;'); } else if (btnText == 'Last 2d') { $('#slider').slider('value', 10); // put correct value here $('#date_start').val('TEMPlate_l2d_start;'); $('#date_end').val('TEMPlate_l2d_end;'); $('#time_start').val('TEMPlate_time_end;'); $('#time_end').val('TEMPlate_time_end;'); } else if (btnText == 'Last 1w') { $('#slider').slider('value', 15); // put correct value here $('#date_start').val('TEMPlate_l1w_start;'); $('#date_end').val('TEMPlate_l1w_end;'); $('#time_start').val('TEMPlate_time_end;'); $('#time_end').val('TEMPlate_time_end;'); } else if (btnText == 'Last 30d') { $('#slider').slider('value', 25); // put correct value here $('#date_start').val('TEMPlate_l1m_start;'); $('#date_end').val('TEMPlate_l1m_end;'); $('#time_start').val('TEMPlate_time_end;'); $('#time_end').val('TEMPlate_time_end;'); } return false; });

You should also clear this function a bit (use an internal function, perhaps to reduce repetition).

It makes sense? The rest should be minor tricks.

EDIT: Here is a jsFiddle example that I used for testing. That is not all, but you understand: http://jsfiddle.net/greglockwood/NTrXH/3/

+6
source

Source: https://habr.com/ru/post/901491/

More articles:


All Articles