Search and Top Navigation
#5780 closed bug (worksforme)
Opened June 29, 2010 10:59AM UTC
Closed October 27, 2010 08:36PM UTC
Last modified October 11, 2012 09:15PM UTC
Negative values for slider
| Reported by: | Thangalin | Owned by: | |
|---|---|---|---|
| Priority: | major | Milestone: | |
| Component: | ui.slider | Version: | 1.8.1 |
| Keywords: | negative min values | Cc: | |
| Blocked by: | Blocking: |
Description
The code below dynamically resets the options for two select elements. The select elements allow JavaScript to fail gracefully. The code:
(1) creates a new list of <options>;
(2) removes the current <options> from the <select> list;
(3) appends the new list of <options> to the <select> list;
(4) updates the slider with the new min, max, steps, and default values.
The problem is the line "//if( value > 0 ) {".
When the slider is initialised, it is given -65 as the min value and 50 as the max value. Everything works fine.
However, changing the slider min/max values dynamically (shown in the code below) to 0 and 500 and then back to -65 and 50, results in an "m is undefined" error.
When the problem line is commented out (i.e., when only positive values are appended to the list), the slider works as expected. It is only when the slider is reassigned a negative min value that the error appears. Positive values (0 and up) work fine.
var options = [];
$.each( data, function( index, value ) {
//if( value > 0 ) {
options.push(
'<option value="' + value + '">' + value + '</option>' );
}
});
If the category is "temperature" (degrees C), increment by 1.
var steps = (units == 'c' ? 1 : 10);
var min = category.amount_min;
var max = category.amount_max;
var j = options.join( '' );
if( min < 0 ) { min = 0; }
$('#report_int_Amount1')
.find('option').remove().end().append( j ).val( min );
$('#report_int_Amount2')
.find('option').remove().end().append( j ).val( max );
$("#slider-amounts").slider( "option", "min", min );
$("#slider-amounts").slider( "option", "max", max );
$("#slider-amounts").slider( "option", "step", steps );
$("#slider-amounts").slider( "option", "values", [min, max] );
Attachments (0)
Change History (3)
Changed June 29, 2010 11:01AM UTC by comment:1
Changed October 27, 2010 08:36PM UTC by comment:2
| resolution: | → worksforme |
|---|---|
| status: | new → closed |
Works for me: http://jsbin.com/eyopo4/edit
Changed October 11, 2012 09:15PM UTC by comment:3
| milestone: | TBD |
|---|
Milestone TBD deleted
The slider is created as follows:
$("#slider-amounts").slider({
range: true,
min: -65,
max: 50,
step: 1,
values: [-65, 50],
slide: function(e, ui){
if( ui.values[1] - ui.values[0] >= 1 ) {
$('#amount1-show').html( ui.values[0] );
$('#amount2-show').html( ui.values[1] );
if( category.units_abbr != undefined ) {
$('#amount-unit1').html( category.units_abbr );
$('#amount-unit2').html( category.units_abbr );
}
$('select#report_int_Amount1').val( ui.values[0] );
$('select#report_int_Amount2').val( ui.values[1] );
return true;
}
else {
return false;
}
}
});
The <select> option is created as follows (before it gets changed dynamically):
<select name='report_int_Amount1' id='report_int_Amount1'>
<option value='-65' selected='selected'>-65</option><option value='-64'>-64</option><option value='-63'>-63</option><option value='-62'>-62</option><option value='-61'>-61</option><option value='-60'>-60</option><option value='-59'>-59</option><option value='-58'>-58</option><option value='-57'>-57</option><option value='-56'>-56</option><option value='-55'>-55</option><option value='-54'>-54</option><option value='-53'>-53</option><option value='-52'>-52</option><option value='-51'>-51</option><option value='-50'>-50</option><option value='-49'>-49</option><option value='-48'>-48</option><option value='-47'>-47</option><option value='-46'>-46</option><option value='-45'>-45</option><option value='-44'>-44</option><option value='-43'>-43</option><option value='-42'>-42</option><option value='-41'>-41</option><option value='-40'>-40</option><option value='-39'>-39</option><option value='-38'>-38</option><option value='-37'>-37</option><option value='-36'>-36</option><option value='-35'>-35</option><option value='-34'>-34</option><option value='-33'>-33</option><option value='-32'>-32</option><option value='-31'>-31</option><option value='-30'>-30</option><option value='-29'>-29</option><option value='-28'>-28</option><option value='-27'>-27</option><option value='-26'>-26</option><option value='-25'>-25</option><option value='-24'>-24</option><option value='-23'>-23</option><option value='-22'>-22</option><option value='-21'>-21</option><option value='-20'>-20</option><option value='-19'>-19</option><option value='-18'>-18</option><option value='-17'>-17</option><option value='-16'>-16</option><option value='-15'>-15</option><option value='-14'>-14</option><option value='-13'>-13</option><option value='-12'>-12</option><option value='-11'>-11</option><option value='-10'>-10</option><option value='-9'>-9</option><option value='-8'>-8</option><option value='-7'>-7</option><option value='-6'>-6</option><option value='-5'>-5</option><option value='-4'>-4</option><option value='-3'>-3</option><option value='-2'>-2</option><option value='-1'>-1</option><option value='0'>0</option><option value='1'>1</option><option value='2'>2</option><option value='3'>3</option><option value='4'>4</option><option value='5'>5</option><option value='6'>6</option><option value='7'>7</option><option value='8'>8</option><option value='9'>9</option><option value='10'>10</option><option value='11'>11</option><option value='12'>12</option><option value='13'>13</option><option value='14'>14</option><option value='15'>15</option><option value='16'>16</option><option value='17'>17</option><option value='18'>18</option><option value='19'>19</option><option value='20'>20</option><option value='21'>21</option><option value='22'>22</option><option value='23'>23</option><option value='24'>24</option><option value='25'>25</option><option value='26'>26</option><option value='27'>27</option><option value='28'>28</option><option value='29'>29</option><option value='30'>30</option><option value='31'>31</option><option value='32'>32</option><option value='33'>33</option><option value='34'>34</option><option value='35'>35</option><option value='36'>36</option><option value='37'>37</option><option value='38'>38</option><option value='39'>39</option><option value='40'>40</option><option value='41'>41</option><option value='42'>42</option><option value='43'>43</option><option value='44'>44</option><option value='45'>45</option><option value='46'>46</option><option value='47'>47</option><option value='48'>48</option><option value='49'>49</option><option value='50'>50</option>
</select>