Databases
StackOverflow2013
Postsdbo
PO
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>(⌐■_■) Hello there, my code attached below implements (i) 3 JQuery UI Slider handles which means 4 ranges, (ii) non-collision of range values, (iii) coloring of ranges, (iv) title tooltip on handle and (v) display of range values. Please note that I am using an old JQuery version. Also, it has a pattern which means it can likely be re-coded to support >=4 handles elegantly as well.</p> <pre><code>&lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt; &lt;title&gt;Test Slider&lt;/title&gt; &lt;link type="text/css" href="css/jquery-ui-1.7.2.custom.css" rel="stylesheet" /&gt; &lt;script src="js/jquery-1.3.2.min.js" type="text/javascript"&gt;&lt;/script&gt; &lt;script src="js/jquery-ui-1.7.2.custom.min.js" type="text/javascript"&gt;&lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;style&gt; div.demo { padding: 10px !important; }; &lt;/style&gt; &lt;div class="demo"&gt; &lt;p&gt; &lt;label&gt;% Style:&lt;/label&gt; &lt;input type="text" id="weightage_style" style="border:0; color:#f6931f; font-weight:bold;" /&gt; &lt;br /&gt; &lt;label&gt;% Design:&lt;/label&gt; &lt;input type="text" id="weightage_design" style="border:0; color:#f6931f; font-weight:bold;" /&gt; &lt;br /&gt; &lt;label&gt;% Correctness:&lt;/label&gt; &lt;input type="text" id="weightage_correctness" style="border:0; color:#f6931f; font-weight:bold;" /&gt; &lt;br /&gt; &lt;label&gt;% Others:&lt;/label&gt; &lt;input type="text" id="weightage_others" style="border:0; color:#f6931f; font-weight:bold;" /&gt; &lt;br /&gt; &lt;/p&gt; &lt;div id="weightage_slider" style="font-size:12px;width:300px;"&gt;&lt;/div&gt; &lt;/div&gt; &lt;script&gt; $( "#weightage_slider" ).slider({ min: 0, max: 100, orientation: "horizontal", step: 1, values: [ 10, 40, 90 ], // set three handles slide: function( event, ui ) { // NOTE: during slide, the following sequence occurs: (i) change ui.value (ii) call this function (iii) move the slider handle // these four lines update the display of handle ranges $( "#weightage_style" ).val( "0" + " - " + $( "#weightage_slider" ).slider('values', 0) ); $( "#weightage_design" ).val( $( "#weightage_slider" ).slider('values', 0) + " - " + $( "#weightage_slider" ).slider('values', 1) ); $( "#weightage_correctness" ).val( $( "#weightage_slider" ).slider('values', 1) + " - " + $( "#weightage_slider" ).slider('values', 2) ); $( "#weightage_others" ).val( $( "#weightage_slider" ).slider('values', 2) + " - " + "100" ); if ( ui.handle == $( "#weightage_slider_0" ).get(0) ) { if(ui.values[ 0 ] &gt;= ui.values[ 1 ]){ $( "#weightage_slider" ).slider('values', 0, ui.values[ 1 ]); // triggers change event return false; } else { // handle-0 will move // update display of colored handle ranges $( "#weightage_slider_a" ).css('left', '0%'); $( "#weightage_slider_a" ).css('width', (ui.values[ 0 ] + '%')); $( "#weightage_slider_b" ).css('left', (ui.values[ 0 ] + '%')); $( "#weightage_slider_b" ).css('width', ((ui.values[1] - ui.values[0]) + '%')); } } if ( ui.handle == $( "#weightage_slider_1" ).get(0) ) { if(ui.values[ 1 ] &lt;= ui.values[ 0 ]){ $( "#weightage_slider" ).slider('values', 1, ui.values[ 0 ]); // triggers change event return false; }else if(ui.values[ 1 ] &gt;= ui.values[ 2 ]){ $( "#weightage_slider" ).slider('values', 1, ui.values[ 2 ]); // triggers change event return false; }else{ // handle-1 will move // update display of colored handle ranges $( "#weightage_slider_b" ).css('left', (ui.values[ 0 ] + '%')); $( "#weightage_slider_b" ).css('width', ((ui.values[1] - ui.values[0]) + '%')); $( "#weightage_slider_c" ).css('left', (ui.values[ 1 ] + '%')); $( "#weightage_slider_c" ).css('width', ((ui.values[2] - ui.values[1]) + '%')); } } if ( ui.handle == $( "#weightage_slider_2" ).get(0) ) { if(ui.values[ 2 ] &lt;= ui.values[ 1 ]){ $( "#weightage_slider" ).slider('values', 2, ui.values[ 1 ]); // triggers change event return false; } else{ // handle-2 will move // update display of colored handle ranges $( "#weightage_slider_c" ).css('left', (ui.values[ 1 ] + '%')); $( "#weightage_slider_c" ).css('width', ((ui.values[2] - ui.values[1]) + '%')); $( "#weightage_slider_d" ).css('left', (ui.values[ 2 ] + '%')); $( "#weightage_slider_d" ).css('width', ((100 - ui.values[2]) + '%')); } } }, change: function( event, ui ) { // because slide event has function that changes handles' value programmatically, the following is necessary // these four lines update the display of handle ranges $( "#weightage_style" ).val( "0" + " - " + $( "#weightage_slider" ).slider('values', 0) ); $( "#weightage_design" ).val( $( "#weightage_slider" ).slider('values', 0) + " - " + $( "#weightage_slider" ).slider('values', 1) ); $( "#weightage_correctness" ).val( $( "#weightage_slider" ).slider('values', 1) + " - " + $( "#weightage_slider" ).slider('values', 2) ); $( "#weightage_others" ).val( $( "#weightage_slider" ).slider('values', 2) + " - " + "100" ); // update display of colored handle ranges $( "#weightage_slider_a" ).css('left', '0%'); $( "#weightage_slider_a" ).css('width', (ui.values[ 0 ] + '%')); $( "#weightage_slider_b" ).css('left', (ui.values[ 0 ] + '%')); $( "#weightage_slider_b" ).css('width', ((ui.values[1] - ui.values[0]) + '%')); $( "#weightage_slider_c" ).css('left', (ui.values[ 1 ] + '%')); $( "#weightage_slider_c" ).css('width', ((ui.values[2] - ui.values[1]) + '%')); $( "#weightage_slider_d" ).css('left', (ui.values[ 2 ] + '%')); $( "#weightage_slider_d" ).css('width', ((100 - ui.values[2]) + '%')); } }); // label each slider handle $( "#weightage_slider &gt; a" ).each(function(index){ $(this).attr('id', 'weightage_slider_' + index); $(this).attr('title', 'slider handle ' + index); }); // the following four div tags result in the display of colored handle ranges // the following left attributes and width attributes should be consistent with slider initialization - values array $('#weightage_slider').append("&lt;div id='weightage_slider_a' class='ui-slider-range' style='left:0%;width:10%;background-color:#41d862;'&gt;&lt;/div&gt;"); $('#weightage_slider').append("&lt;div id='weightage_slider_b' class='ui-slider-range' style='left:10%;width:30%;background-color:#41b7d8;'&gt;&lt;/div&gt;"); $('#weightage_slider').append("&lt;div id='weightage_slider_c' class='ui-slider-range' style='left:40%;width:50%;background-color:#d841b7;'&gt;&lt;/div&gt;"); $('#weightage_slider').append("&lt;div id='weightage_slider_d' class='ui-slider-range' style='left:90%;width:10%;background-color:#d86241;'&gt;&lt;/div&gt;"); // these four lines display the initial handle ranges $( "#weightage_style" ).val( "0" + " - " + $( "#weightage_slider" ).slider('values', 0) ); $( "#weightage_design" ).val( $( "#weightage_slider" ).slider('values', 0) + " - " + $( "#weightage_slider" ).slider('values', 1) ); $( "#weightage_correctness" ).val( $( "#weightage_slider" ).slider('values', 1) + " - " + $( "#weightage_slider" ).slider('values', 2) ); $( "#weightage_others" ).val( $( "#weightage_slider" ).slider('values', 2) + " - " + "100" ); &lt;/script&gt; &lt;/body&gt; </code></pre> <p>Bug: If handles are dragged to most left, they become "stuck", so you might want to have a reset button to restore handles' position. </p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload