O'Reilly logo

jQuery UI Cookbook by Adam Boduch

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Simplifying the spinner buttons

The default spin buttons implemented in the spinner widget might be a bit much, depending on context. For example, you can clearly see that these are button widgets added to the slider as subcomponents. And this works perfectly when we get to build larger widgets out of smaller ones. This is more along the lines of an aesthetic preference. Maybe the spinner would look better if the individual up and down spin buttons didn't have a hover state, and didn't have a background or border, either for that matter. Let's try taking these style properties away from the buttons in the slider and make them appear more tightly integrated.

How to do it...

Here is the basic HTML structure used as the foundation of our spinner widget: ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required