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/