Difference between revisions of "Projects/Usability/HIG/Slider and Spin Box"

< Projects‎ | Usability‎ | HIG
Jump to: navigation, search
(Added Implementation section)
(Edited "is this the right control")
 
(3 intermediate revisions by 2 users not shown)
Line 1: Line 1:
 +
__NOTOC__
 +
 
== Purpose ==
 
== Purpose ==
[[../Spin_Box|Spin Boxes]] allow a user to enter a specific value, and gives users fine control over which value is chosen, but are slow when moving over large ranges of values.  [[../Slider|Sliders]] allow for quickly changing values over long ranges, but make it harder to select very specific values.  In cases where both are necessary, combing the two is often a good approach.   
+
[[../Spin_Box|Spin Boxes]] allow a user to enter a specific value, and gives users fine control over which value is chosen, but are slow when moving over large ranges of values.  [[../Slider|Sliders]] allow for quickly changing values over long ranges, but make it harder to select very specific values.  In cases where both are necessary, combing the two is sometimes a good approach.   
  
 
== Guidelines ==
 
== Guidelines ==
* Use both a slider and spin box when the value is constrained at both ends, and where precise control over the value is needed or when there are a large number of integers (more than 20).
+
=== Is this the right control ===
 +
* Use both a slider and spin box when the value is constrained at both ends, and when there is a large range of values (more than 20 steps) but precise control over the value is needed nevertheless.
 +
* Consider to use only slider ''or'' spin box if a well defined workflow makes the other redundant.
 +
=== Behavior ===
 
* The values of the slider and spin box should be linked so changes to one are immediately reflect in another.
 
* The values of the slider and spin box should be linked so changes to one are immediately reflect in another.
 +
* Make sure that all requirements from slider and spin box are met.
 +
=== Appearance ===
 
* The spin box should be aligned with the long axis of the slider.  So if the slider is horizontal, the spin box should be to the right of the slider and aligned vertically with the center of the slider.  If the slider is vertical, the spin box should be below the slider and aligned horizontally with the center of the slider.
 
* The spin box should be aligned with the long axis of the slider.  So if the slider is horizontal, the spin box should be to the right of the slider and aligned vertically with the center of the slider.  If the slider is vertical, the spin box should be below the slider and aligned horizontally with the center of the slider.
 
* Provide a single label using a text label above it or to the left of the widgets, using sentence capitalization. Provide an access key in the label that should give focus directly to the spin box.
 
* Provide a single label using a text label above it or to the left of the widgets, using sentence capitalization. Provide an access key in the label that should give focus directly to the spin box.
* Mark significant values along the length of the slider with text or tick marks. For example the left, right and center points on an audio balance control in Figure 6.7, “A simple slider control”.
+
* Mark significant values along the length of the slider with text or tick marks.
  
 
== Implementation ==
 
== Implementation ==
* [http://api.kde.org/4.10-api/kdelibs-apidocs/kdeui/html/classKIntNumInput.html KIntNumInput]. Call setSlideEnabled(true) to show the slider.
+
[http://api.kde.org/4.10-api/kdelibs-apidocs/kdeui/html/classKIntNumInput.html KIntNumInput] and [http://api.kde.org/4.10-api/kdelibs-apidocs/kdeui/html/classKDoubleNumInput.html KDoubleNumInput]. Call setSlideEnabled(true) to show the slider.
 
+
== Related Patterns ==
+
  
[[../Spin_Box|Spin Box]]; [[../Slider|Slider]]
+
[[Category:Usability]][[Category:Behavior]][[Category:Editing_and_Manipulation]][[Category:Constrained_input]]

Latest revision as of 15:27, 2 August 2013


[edit] Purpose

Spin Boxes allow a user to enter a specific value, and gives users fine control over which value is chosen, but are slow when moving over large ranges of values. Sliders allow for quickly changing values over long ranges, but make it harder to select very specific values. In cases where both are necessary, combing the two is sometimes a good approach.

[edit] Guidelines

[edit] Is this the right control

  • Use both a slider and spin box when the value is constrained at both ends, and when there is a large range of values (more than 20 steps) but precise control over the value is needed nevertheless.
  • Consider to use only slider or spin box if a well defined workflow makes the other redundant.

[edit] Behavior

  • The values of the slider and spin box should be linked so changes to one are immediately reflect in another.
  • Make sure that all requirements from slider and spin box are met.

[edit] Appearance

  • The spin box should be aligned with the long axis of the slider. So if the slider is horizontal, the spin box should be to the right of the slider and aligned vertically with the center of the slider. If the slider is vertical, the spin box should be below the slider and aligned horizontally with the center of the slider.
  • Provide a single label using a text label above it or to the left of the widgets, using sentence capitalization. Provide an access key in the label that should give focus directly to the spin box.
  • Mark significant values along the length of the slider with text or tick marks.

[edit] Implementation

KIntNumInput and KDoubleNumInput. Call setSlideEnabled(true) to show the slider.


This page was last modified on 2 August 2013, at 15:27. This page has been accessed 1,073 times. Content is available under Creative Commons License SA 3.0 as well as the GNU Free Documentation License 1.2.
KDE® and the K Desktop Environment® logo are registered trademarks of KDE e.V.Legal