Databases
StackOverflow2013
Postsdbo
POshowing values with multiple sliders
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POshowing values with multiple sliders
    text
    copied!<p>Here is my code after I abandoned my previous attempt at getting something like this to work via progressbars.</p> <pre><code> &lt;!doctype html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;title&gt;Slider Bars&lt;/title&gt; &lt;link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" /&gt; &lt;script src="http://code.jquery.com/jquery-1.9.1.js"&gt;&lt;/script&gt; &lt;script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"&gt;&lt;/script&gt; &lt;style&gt; .ui-slider-handle .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default { background: url(img/marker.png) top left no-repeat; height:41px; width:50px; position:absolute; top:-25px; padding:0; border:none; margin-left:-1.7em; } .ui-widget-content { background-color: #666262; -webkit-background-size: 100px 100px; -moz-background-size: 100px 100px; background-size: 100px 100px; background-image: -webkit-gradient(linear, left top, right bottom, color-stop(.25, rgba(255, 255, 255, .15)), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .15)), color-stop(.75, rgba(255, 255, 255, .15)), color-stop(.75, transparent), to(transparent)); background-image: -webkit-linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent); background-image: -moz-linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent); background-image: -ms-linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent); background-image: -o-linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent); background-image: linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent); height: 25px; width: 390px; margin:10px 0; -moz-border-radius: 0 5px 5px 0; -webkit-border-radius: 0 5px 5px 0; border-radius: 0 5px 5px 0; -moz-box-shadow: 0 1px 5px #000 inset, 0 1px 0 #444; -webkit-box-shadow: 0 1px 5px #000 inset, 0 1px 0 #444; box-shadow: 0 1px 5px #000 inset, 0 1px 0 #444; border:0; } .ui-widget-header { background-color: #aa7a64; -webkit-background-size: 100px 100px; -moz-background-size: 100px 100px; background-size: 100px 100px; background-image: -webkit-gradient(linear, left top, right bottom, color-stop(.25, rgba(134, 0, 0, .15)), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, rgba(134, 0, 0, .15)), color-stop(.75, rgba(134, 0, 0, .15)), color-stop(.75, transparent), to(transparent)); background-image: -webkit-linear-gradient(135deg, rgba(134, 0, 0, .15) 25%, transparent 25%, transparent 50%, rgba(134, 0, 0, .15) 50%, rgba(134, 0, 0, .15) 75%, transparent 75%, transparent); background-image: -moz-linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent); background-image: -ms-linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent); background-image: -o-linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent); background-image: linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent); height:25px; padding:0!important; -moz-border-radius: 0 3px 3px 0; -webkit-border-radius: 0 3px 3px 0; border-radius: 0 3px 3px 0; -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset; -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset; box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset; } .darker { background-color: #85483e; } #revAttain { margin:125px 0 0 0; } #revAttain span { width:590px; height:25px; margin:10px 0; display:block; } &lt;/style&gt; &lt;script&gt; $(function() { $( "#revAttain &gt; span" ).each(function() { var value = parseInt( $( this ).text(), 10 ); $( this ).empty().slider({ value: value, range:"min", orientation: "horizontal", animate: true, slide: function(event, ui) { $(this).find('a').html('&lt;span&gt;' + value + '&lt;/span'); } }); }); }); &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;div id="revAttain"&gt; &lt;span&gt;25&lt;/span&gt;&lt;br /&gt; &lt;span&gt;43&lt;/span&gt;&lt;br /&gt; &lt;span&gt;55&lt;/span&gt;&lt;br /&gt; &lt;span&gt;33&lt;/span&gt;&lt;br /&gt; &lt;span&gt;40&lt;/span&gt;&lt;br /&gt; &lt;span&gt;45&lt;/span&gt;&lt;br /&gt; &lt;span&gt;70&lt;/span&gt; &lt;/div&gt; &lt;script src="js/main.js"&gt;&lt;/script&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>I'm using the multiple sliders example on the jquery UI page and am unable to get the value of the sliding bars width value into the slider handle. </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