Heya!
Thanks to Marty Haught, script.aculo.us (as of changeset 2281) now
sports
a new Control for horizontal and vertical sliders.
See the functional test file (test/functional/slider_test.html) for
information
on how to use it.
Basically, you do:
<div id="track1"
style="width:200px;background-color:#aaa;height:5px;">
<div id="handle1"
style="width:5px;height:10px;background-
color:#f00;"> </div>
</div>
new Control.Slider(''handle1'',''track1'',{
onSlide:function(value){ // do something },
onChange:function(value){ // do something } });
You can also have an array of predefined values, so the slider
"jumps" from
value to value:
new
Control.Slider(''handle3'',''track3'',{values:[0,50,100,150,150,200]});
For vertical sliders, use:
new
Control.Slider(''handle2'',''track2'',{axis:''vertical''});
Have fun, and please give feedback! Big thanks to Marty,
Thomas
Marty, in a word ''Schweet!''. You have just set the bar for scriptaculous controls! (no pun intended ;) -San --- Thomas Fuchs <thomas@fesch.at> wrote:> Heya! > > Thanks to Marty Haught, script.aculo.us (as of > changeset 2281) now > sports > a new Control for horizontal and vertical sliders. > > See the functional test file > (test/functional/slider_test.html) for > information > on how to use it. > > Basically, you do: > > <div id="track1" >style="width:200px;background-color:#aaa;height:5px;">> <div id="handle1" > style="width:5px;height:10px;background- > color:#f00;"> </div> > </div> > > new Control.Slider(''handle1'',''track1'',{ > onSlide:function(value){ // do something }, > onChange:function(value){ // do something } > }); > > You can also have an array of predefined values, so > the slider > "jumps" from > value to value: > > new >Control.Slider(''handle3'',''track3'',{values:[0,50,100,150,150,200]});> > For vertical sliders, use: > > new >Control.Slider(''handle2'',''track2'',{axis:''vertical''});> > Have fun, and please give feedback! Big thanks to > Marty, > > Thomas > _______________________________________________ > Rails-spinoffs mailing list > Rails-spinoffs@lists.rubyonrails.org >http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs>__________________________________ Yahoo! Mail - PC Magazine Editors'' Choice 2005 http://mail.yahoo.com
Is there any way of setting a initial value / position for the slider. I would like my slider to start at the far right, not the left... ______________________________________________________________________ Alex Duffield . Principal . InControl Solutions . http:// www.incontrolsolutions.com On 21-Sep-05, at 2:19 AM, Thomas Fuchs wrote:> Heya! > > Thanks to Marty Haught, script.aculo.us (as of changeset 2281) now > sports > a new Control for horizontal and vertical sliders. > > See the functional test file (test/functional/slider_test.html) for > information > on how to use it. > > Basically, you do: > > <div id="track1" style="width:200px;background-color:#aaa;height: > 5px;"> > <div id="handle1" style="width:5px;height:10px;background- > color:#f00;"> </div> > </div> > > new Control.Slider(''handle1'',''track1'',{ > onSlide:function(value){ // do something }, > onChange:function(value){ // do something } }); > > You can also have an array of predefined values, so the slider > "jumps" from > value to value: > > new Control.Slider(''handle3'',''track3'',{values: > [0,50,100,150,150,200]}); > > For vertical sliders, use: > > new Control.Slider(''handle2'',''track2'',{axis:''vertical''}); > > Have fun, and please give feedback! Big thanks to Marty, > > Thomas > _______________________________________________ > Rails-spinoffs mailing list > Rails-spinoffs@lists.rubyonrails.org > http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs >-------------- next part -------------- An HTML attachment was scrubbed... URL: http://wrath.rubyonrails.org/pipermail/rails-spinoffs/attachments/20051002/ab16fbb8/attachment.html
Alex Duffield wrote:> Is there any way of setting a initial value / position for the slider. > > I would like my slider to start at the far right, not the left...Yes, there is. In the options pass in this: sliderValue: x. You can also call the setSliderValue function to set it after you define your slider. Hope that helps. Cheers, Marty
Great thanks.
I think this is a complete list of all options you can set in the
slider...
axis: (horizontal or vertical)
increment:
step:
maximum:
minimum:
sliderValue:
handleImage:
handleDisabled:
values: [10, 20, 30, 40];
zindex:
onSlide:
onChange:
(did I miss any?)
I have a couple questions re the way maximum and minimum work.
For my application I am using a slider to scale an image.
I want to restrict the user to not be able to scale the image to less
then 25 px wide.
For simplicity, my slider is 100px long. Say the image currently
being scaled is also 100px wide.
I am using sliderValue:100 to set the initial scale to 100%. I tried
to use minimum:25 to restrict the scale to 25%, and this works
corectly, BUT, my slider now slides between 0 and 75 visually, even
though the values sent are correct (25-100).
This seems to be an incorrect behavior (at least in my application),
and the only workaround solution I can see is to adjust my track, and
then do a bunch of adjustments to the value passed by my slider...
I am sure there is probably some more sensible method that I am
overlooking, as all of this stuff seems so well thought out.. Any
advise is greatly appreciated!
Thanks for the code!
______________________________________________________________________
Alex Duffield . Principal . InControl Solutions . http://
www.incontrolsolutions.com
On 3-Oct-05, at 8:10 AM, Marty Haught wrote:
> sliderValue:
-------------- next part --------------
An HTML attachment was scrubbed...
URL:
http://wrath.rubyonrails.org/pipermail/rails-spinoffs/attachments/20051003/f04b3d47/attachment.html
Alex Duffield wrote:> Great thanks. > > I think this is a complete list of all options you can set in the > slider... > > axis: (horizontal or vertical) > increment: > step: > maximum: > minimum: > sliderValue: > handleImage: > handleDisabled: > values: [10, 20, 30, 40]; > zindex: > onSlide: > onChange: > > (did I miss any?) > > I have a couple questions re the way maximum and minimum work. > > For my application I am using a slider to scale an image. > > I want to restrict the user to not be able to scale the image to less > then 25 px wide. > > For simplicity, my slider is 100px long. Say the image currently being > scaled is also 100px wide. > > I am using sliderValue:100 to set the initial scale to 100%. I tried > to use minimum:25 to restrict the scale to 25%, and this works > corectly, BUT, my slider now slides between 0 and 75 visually, even > though the values sent are correct (25-100). > > This seems to be an incorrect behavior (at least in my application), > and the only workaround solution I can see is to adjust my track, and > then do a bunch of adjustments to the value passed by my slider... > > I am sure there is probably some more sensible method that I am > overlooking, as all of this stuff seems so well thought out.. Any > advise is greatly appreciated!The behavior is correct but I agree with you that it doesn''t seem right for your application. I actually do the same thing with my sliders. For the initial build, I decided to keep the minimum at the start of the slider. If the minimum is above zero then the slider is zero''d out at the minimum. So in your case you could simply change the length of the track to be 75 pixels, then set the minimum to 25 and maximum to 100. That''s what I did. You could also play that css trickery, putting your slider into a large div with a background image that matches up with the track but extends it 25 pixels. Not ideal but would work without any slider code change. I will most likely get around to allowing another minimum value to be set that has nothing to do with zeroing out the track. It might get tricky as now that the control is out, I have to be very careful about renaming variables or adjusting the code. I will also get around to documenting the control too. Though if others feel compelled to document it on the wiki, I''m cool with that also. :) Cheers, Marty
After a bit of thought, I think what I am looking for is an different
option that minimum: ...
Perhaps trackOffsetLeft: and trackOffsetTop: would be a useful
addition.
In this way I could have control of the range my slider could travel
on the track.
Also it would be great to be able to call those after the fact in the
same way as the setSliderValue funcion works.
This would also let me to use one less DIV to build the slider..
Right now I have a
<div id="slidecontainer">
<div id="track"></div>
<div id="slider"></div>
</div>
The slide container has its background set to the image for the
slider track.
?
The track is set to be left:8px; top:0
If there was a trackOffsetLeft: option. I would be able to use:
<div id="track">
<div id="slider"></div>
</div>
by setting the offset to 8
Just my 2 bits!
Cheers.
______________________________________________________________________
Alex Duffield . Principal . InControl Solutions . http://
www.incontrolsolutions.com
On 3-Oct-05, at 9:11 AM, Alex Duffield wrote:
> Great thanks.
>
> I think this is a complete list of all options you can set in the
> slider...
>
> axis: (horizontal or vertical)
> increment:
> step:
> maximum:
> minimum:
> sliderValue:
> handleImage:
> handleDisabled:
> values: [10, 20, 30, 40];
> zindex:
> onSlide:
> onChange:
>
> (did I miss any?)
>
> I have a couple questions re the way maximum and minimum work.
>
> For my application I am using a slider to scale an image.
>
> I want to restrict the user to not be able to scale the image to
> less then 25 px wide.
>
> For simplicity, my slider is 100px long. Say the image currently
> being scaled is also 100px wide.
>
> I am using sliderValue:100 to set the initial scale to 100%. I
> tried to use minimum:25 to restrict the scale to 25%, and this
> works corectly, BUT, my slider now slides between 0 and 75
> visually, even though the values sent are correct (25-100).
>
> This seems to be an incorrect behavior (at least in my
> application), and the only workaround solution I can see is to
> adjust my track, and then do a bunch of adjustments to the value
> passed by my slider...
>
> I am sure there is probably some more sensible method that I am
> overlooking, as all of this stuff seems so well thought out.. Any
> advise is greatly appreciated!
>
> Thanks for the code!
> ______________________________________________________________________
> Alex Duffield . Principal . InControl Solutions . http://
> www.incontrolsolutions.com
>
>
>
> On 3-Oct-05, at 8:10 AM, Marty Haught wrote:
>
>> sliderValue:
>
> _______________________________________________
> Rails-spinoffs mailing list
> Rails-spinoffs@lists.rubyonrails.org
> http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs
>
-------------- next part --------------
Skipped content of type multipart/related
Alex Duffield wrote:> Great thanks. > > I think this is a complete list of all options you can set in the > slider... > > axis: (horizontal or vertical) > increment: > step: > maximum: > minimum: > sliderValue: > handleImage: > handleDisabled: > values: [10, 20, 30, 40]; > zindex: > onSlide: > onChange: > > (did I miss any?)zindex actually isn''t an option. It does get set but I didn''t open it up as an option. I suppose it might be useful though I haven''t used it much to know if it would be. Here are a few others: alignX - will move the handle so that it aligns properly on the track. This will move it x pixels on the x-axis. alignY - will move the handle so that it aligns properly on the track. This will move it x pixels on the y-axis. disabled - will set the slider''s state to being ''locked'' and thus won''t respond to input. Cheers, Marty
Ha, perfect, that is the exact functionality I was looking for in my
suggested "trackOffsetLeft: and trackOffsetTop:" (but your naming is
better!)
By using minimum and alignX together, I am getting the exact
functionality I was looking for.
new Control.Slider(''scaller'', ''track'',{
sliderValue:100,
minimum:25,
alignX:25,
onSlide:function(v){doScale(v)}
});
Now I just need away to change the value of alignX after the slider
is created, (like setSliderValue does) incase I load in a different
image.
My minimum scale is 25px, so for a 100px image 25 is right, but If I
load in a 200px wide image, the minimum and alignX values would need
to be changed to 13 (well 12.5 but thats another issue!!)
Cheers.
______________________________________________________________________
Alex Duffield . Principal . InControl Solutions . http://
www.incontrolsolutions.com
On 3-Oct-05, at 10:10 AM, Marty Haught wrote:
> Alex Duffield wrote:
>
>
>> Great thanks.
>>
>> I think this is a complete list of all options you can set in the
>> slider...
>>
>> axis: (horizontal or vertical)
>> increment: step: maximum:
>> minimum:
>> sliderValue:
>> handleImage: handleDisabled:
>> values: [10, 20, 30, 40];
>> zindex:
>> onSlide:
>> onChange:
>>
>> (did I miss any?)
>>
>
> zindex actually isn''t an option. It does get set but I
didn''t open
> it up as an option. I suppose it might be useful though I haven''t
> used it much to know if it would be.
>
> Here are a few others:
>
> alignX - will move the handle so that it aligns properly on the
> track. This will move it x pixels on the x-axis.
> alignY - will move the handle so that it aligns properly on the
> track. This will move it x pixels on the y-axis.
> disabled - will set the slider''s state to being
''locked'' and thus
> won''t respond to input.
>
> Cheers,
> Marty
>
> _______________________________________________
> Rails-spinoffs mailing list
> Rails-spinoffs@lists.rubyonrails.org
> http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs
>
-------------- next part --------------
An HTML attachment was scrubbed...
URL:
http://wrath.rubyonrails.org/pipermail/rails-spinoffs/attachments/20051003/e41dd712/attachment-0001.html