Change Slider from Range to Single Value
Hi,
I am trying to use the slider in two, exclusive ways. In one instance,
I want a range of values to search for. In the other instance, I want
to search for a single value. I want one slider to do this and plan to
use a checkbox to toggle range:true and range:false.
I read on the blog that you could change options on the fly, but
haven't had any success with this.
This is my attempt to change an already-set slider that functions
perfectly.
$("input[name=rangeLSAT]").bind("click",function(){
if($(this).attr("checked")){
// Now it's checked
}
else{
// Now it's unchecked
$("#LSAT_Slider").slider({
range: false,
slide: function(e,ui) {
alert("Hi");
}
});
}
Here is the initial slider that is working:
$("#LSAT_Slider").slider({
range: true,
steps: 61,
min: 120,
max: 180,
slide: function(e,ui) {
var lsat = $(this).slider("value");
var id = ui.handle[0].id;
if(id == "LSAT1"){
$("input[name=LSAT1]").val(lsat);
}
else if(id == "LSAT2"){
$("input[name=LSAT2]").val(lsat);
}
}
});;
The HTML, though I don't think it's relevant now because the error
(first to follow) happens before I would hide the 2nd handler. HTML is
2nd to follow.
ERROR:
C.data("mouse") has no properties
e(undefined, "x")jquery-ui-1.5-sli... (line 1)
e(Object originalEvent=Event mousedown which=1 view=window,
div#LSAT1.ui-slider-handle)jquery-ui-1.5-sli... (line 1)
e(Object originalEvent=Event mousedown which=1 view=window)jquery-
ui-1.5-sli... (line 1)
e(Object originalEvent=Event mousemove which=1 view=window)jquery-
ui-1.5-sli... (line 1)
e(Object originalEvent=Event mousemove which=1 view=window)jquery-
ui-1.5-sli... (line 1)
e(Object originalEvent=Event mousemove which=1
view=window)jquery-1.2.6.pack... (line 11)
e() });
HTML:
<div class="slider">
<div style="float:left;"><input name="LSAT1" value="120"
type="text" class="range" /> </div>
<div id='LSAT_Slider' class='ui-slider-2'">
<div class='ui-slider-handle' id="LSAT1"></div>
<div class='ui-slider-handle' style="left: 301px;" id="LSAT2"></
div>
</div>
<div style="float:left;"><input name="LSAT2" value="180"
type="text" class="range" /></div>
<div class="spacer"></div>
</div>
I hope somebody can point me in the right direction! Thanks