One of my goals was to hide EVERYTHING from the user. In the implementation I used, if you set an id on the input range element, you can actually set the width on it, and the range will scale accordingly. It wasn't trivial, but I think I struck a good balance between customizability and hiding the implementation from an average designer.

On 10/5/06, George Adamson <[EMAIL PROTECTED]> wrote:


Very nice. That'll be useful. I attempted the same thing not long ago but
got distracted onto other things.
http://www.softwareunity.com/sandbox/JQuerySlider/    (best in IE). Thought
it may be helpful to share some discoveries...

By using css alone I found there was no need to wrap the slider in any DIVs
etc. The bg image provides the button that you move (and horizontal line if
you want it). Borders could be removed too. If you need static markers to
show increments then I suppose you could add them with extra markup. I was
thinking of experimenting with a carefully positioned list-style-image for
that, but it may be too fussy.

The tricky part is translating between the ranges of the value, the slider
and the mouse pointer. I found it easier to separate these translations into
functions so that I did not have to think about them again!

Good luck

George

wycats wrote:
>
> I've developed (or partially developed) a new plugin that implements
> webform2's slider. Specifically, you can do stuff like <input type="range"
> step="1" min="1" max="10" value="1" id="a" /> and jQuery will
> automatically
> convert it into a stylable range widget.
>
> It uses jQuery and Interface, but there are three problems:
> 1) There is a rounding error of some sort, such that sometimes (not
> always),
> it's tough to get the range widget to get to the last number in the range.
> 2) There's a bug in IE I can't track down.
> 3) In order to make it work, I had to multiply my values (for the
> Interface
> slider's value array) by 234. Not 200; not 255; 234. The only reason I
> know
> it works is that I did a ton of trial and error to figure out how
> SliderSetValues works, and multiplying by that linear number fixed all the
> problems I was having. Ideally, I'd like to know why this is happening.
>
> You can check out the widget as it currently stands at:
> http://www.visualjquery.com/plugins/slider.html
> The _javascript_ is at: http://www.visualjquery.com/plugins/range_control.js
>
> The pertinent HTML is in the "about" div, and the pertinent CSS (the
> little
> that there is) is the CSS related to #a, #b, and #c.
>
> Please help!
>
> --
> Yehuda Katz
> Web Developer | Wycats Designs
> (ph)  718.877.1325
>
> _______________________________________________
> jQuery mailing list
> discuss@jquery.com
> http://jquery.com/discuss/
>
>
Quoted from:
http://www.nabble.com/Slider-plugin-%28pre-alpha%29%3A-HELP-NEEDED-tf2389171.html#a6660725


wycats wrote:
>
> I've developed (or partially developed) a new plugin that implements
> webform2's slider. Specifically, you can do stuff like <input type="range"
> step="1" min="1" max="10" value="1" id="a" /> and jQuery will
> automatically
> convert it into a stylable range widget.
>
> It uses jQuery and Interface, but there are three problems:
> 1) There is a rounding error of some sort, such that sometimes (not
> always),
> it's tough to get the range widget to get to the last number in the range.
> 2) There's a bug in IE I can't track down.
> 3) In order to make it work, I had to multiply my values (for the
> Interface
> slider's value array) by 234. Not 200; not 255; 234. The only reason I
> know
> it works is that I did a ton of trial and error to figure out how
> SliderSetValues works, and multiplying by that linear number fixed all the
> problems I was having. Ideally, I'd like to know why this is happening.
>
> You can check out the widget as it currently stands at:
> http://www.visualjquery.com/plugins/slider.html
> The _javascript_ is at: http://www.visualjquery.com/plugins/range_control.js
>
> The pertinent HTML is in the "about" div, and the pertinent CSS (the
> little
> that there is) is the CSS related to #a, #b, and #c.
>
> Please help!
>
> --
> Yehuda Katz
> Web Developer | Wycats Designs
> (ph)  718.877.1325
>
> _______________________________________________
> jQuery mailing list
> discuss@jquery.com
> http://jquery.com/discuss/
>
>

--
View this message in context: http://www.nabble.com/Slider-plugin-%28pre-alpha%29%3A-HELP-NEEDED-tf2389171.html#a6661610
Sent from the JQuery mailing list archive at Nabble.com.


_______________________________________________
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/



--
Yehuda Katz
Web Developer | Wycats Designs
(ph)  718.877.1325
_______________________________________________
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/

Reply via email to