Slider Usage Guideline Bookmark this Guideline Printable Page


RCUI Document Version 5.1.0 for Oracle® Fusion Middleware 11g Release 1 Patch Set 1 (11.1.1.2.0)
Last Updated 23-Feb-2011

The Slider selects a number or range from a series of numeric values.

Guideline Contents

Note: Images in this guideline are provided as a general reference, and may not be exact representations of FusionFX pages.

Related Guidelines

Guideline Section For Information About
Spinbox All Equivalent function for selection from a large range of numeric values with fixed increments.
Select Choice All Equivalent function for selection of text values.
Input/Output Text All Equivalent function for entry of text or numeric values.
Help Framework Note Windows Help method used with sliders.

Related ADF Elements

Refer to the ADF Faces Rich Client demos page to find demos and tag documentation for the ADF elements related to this component:

ADF Element Notes
af:inputNumberSlider Single slider.
af:inputRangeSlider Range slider.

General Principles Bookmark this Heading Return to Top

Purpose:

Allows users to select a single value or a range from a series of numeric values.

Description:

The slider component mimics the physical slider control commonly used in electronic and mechanical equipment. Sliders map one range of numbers to another. For example, a slider throttle on a ride-on lawnmower maps the slider position to the amount of fuel provided for the motor.

Typically, a software slider maps a range of pixels to some range of values that is meaningful within the context of an application. For example, a slider that is 100 pixels long could be mapped to amounts between 0 and 1000 dollars, where movement of 10 pixels is equal to an increment of 100 dollars.

Horizontal sliders: range type with two thumbs on the slider as well as thumb values, and the single type, featuring one thumb.

Horizontal Slider Types: Range Slider and Single Slider

Usage:

  • A slider may be used within a form layout or as a stand-alone component. Sliders should not be placed in table cells.
  • Numbers on a slider may be of any increment.
  • Sliders may be used for non-numeric ranges, such as hot, warm, and cold. The ranges are assigned numeric values by a converter without exposing the numbers to the user.
  • Both slider and Spinbox components can be used to specify a value in a range. The slider is recommended when at least one of the following conditions exists:
    • The range is relatively small—less than ten values.
    • Ranges are irregular and may have unorthodox start and end points, such as barometer readings or temperature readings (in Fahrenheit).
    • Data is subjective rather than literal, such as a product evaluation from 1 - 10 rather than specifying a number of items.
    • Adjusting the setting relative to the current value is more meaningful than choosing an absolute value. For example, when users adjust sound volume, they either increase or decrease it relative to the current volume.
    • Users do not know the values to select in advance, and rely on feedback from the application to determine whether a value setting is appropriate.
  • If the numeric values are meaningful only in terms of being lesser and greater, and the range of values is small, consider using another selection-oriented component such as radio group or choice list, with descriptive labels instead of numbers. For example, instead of rating a product or service from 1 to 5, consider rating it from Poor to Excellent, or Very Dissatisfied to Very Satisfied.
  • Sliders can be oriented horizontally or vertically, depending on page layout requirements.

Types of Sliders Bookmark this Heading Return to Top

Sliders can select a single value or support a range:

  • A single slider is used to select a single value. For example, a single slider may be used to make a graphics object more or less transparent.
  • A range slider is used to select a range. For example, a range slider in an HR application may be used to specify minimum and maximum numbers of hours worked per week by hourly employees. If an employee works more or fewer hours than the range specified, the system generates a notification to the manager. See the Thumb element below for details.
A horizontal range slider showing tick marks and the thumbs.

Range Slider

Elements Bookmark this Heading Return to Top

The following images show the elements of single and range sliders.

Horizontal single slider elements, including the prompt, the Decrease iconic button, slider bar, thumb, major tick marks and minor tick marks along the slider, thumb value, tooltip and the Increase iconic button             Vertical range slider elements: the thumbs, thumb values, tick marks and prompt.

Single and Range Slider Elements

Prompt Bookmark this Heading Return to Top

Purpose:

Identifies the range of data within the slider.

Usage:

  • Prompts are strongly recommended in most cases.
  • There is no limit to the number of characters allowed in the prompt, but product teams must make sure that the layout allows for prompts to become up to 100 percent longer in translation.
  • Prompts may be placed before or above a slider. Place the prompt before the slider in most cases. If horizontal space is an issue, such as inside an accordion pane, place the prompt above the slider.
  • If a slider scale consists of percentages, indicate this by appending "(%)" to the prompt text.
  • Prompts may be visually omitted when the function of the slider is obvious to the product's users without displaying a label, typically because the preceding header helps identify the field.
  • When a prompt is visually omitted, provide a hidden prompt label so that accessibility tools, such as screen readers, can still read a prompt for the data.
  • Slider prompts should use headline capitalization. See Capitalization in the Language in UI guideline for details.

Bar Bookmark this Heading Return to Top

Purpose:

Shows the range of values that can be selected.

Description:

Users can drag the thumb or click the bar to set the value for the slider.

Usage:

  • The slider bar may be horizontally or vertically oriented. Horizontal orientation is recommended unless there is inadequate space for the length of the bar.
  • The default length of the bar is 120 pixels, but product teams may make the slider longer to:
    • Accommodate large number ranges, or
    • Increase the target area when choosing a value for the slider is a key task on the page.
  • For optimal data representation, the length of the slider bar should be adjusted to match the number of increments in the scale (see Scale below for details). For example, if a scale uses values 1-7 and the bar's width is 100 pixels (which is not evenly divisible by seven), the length of bar allocated to each increment would not be even. In this case, the solution would be to increase the number of pixels to 105, allowing a division of 15 pixels per increment.
  • A slider should be disabled when users are not able to select a value, but it is necessary to display the slider because it may be enabled in different contexts.
  • A slider should be shown as read-only when data is displayed in a read-only page, such as a printable page. Read-only data may also be displayed when the user has permission to view the data, but not to edit it.

Thumb Bookmark this Heading Return to Top

Purpose:

Enables users to select slider values.

Description:

  • A single slider has one thumb to select a single value. A range slider has two thumbs to select the start and end values in a range.
  • A thumb value label indicates the value associated with the current thumb position. The value displayed depends on the slider's minimum increment setting. See Increments below for details.
  • The tooltip of a slider thumb is the currently selected value.
  • Users can move a slider thumb by:
    • Dragging the thumb.
    • Using the Increase/Decrease Buttons.
    • Pressing arrow keys when the thumb has keyboard focus.
    • Clicking or dragging the slider bar, depending on type of slider:
      • Single Slider: Click the slider bar to move the thumb to that position.
      • Range Slider: Drag the bar between the two thumbs to simultaneously move both thumbs the same distance in the same direction.
  • In a range slider, if users move the start thumb past the end thumb, the start thumb becomes the end thumb and vice-versa.

Usage:

  • By default, a single slider thumb is positioned in the middle of the bar. Product teams may change the default position to meet the needs of the slider scale. It may be appropriate to position the thumb at the minimum setting when users may not want to make use of the option controlled by the slider, such as a volume control.
  • By default, the start and end thumbs in a range slider are positioned at the start and end of the slider bar respectively. Product teams may change the default positions to meet the needs of the slider scale. Both start and end thumbs may also occupy the same position if needed.

Scale Bookmark this Heading Return to Top

Purpose:

Determines the range of values that can be selected.

Description:

The scale is represented by the bar and defined by scale labels.

Usage:

  • Scales may be in whole numbers, decimals, percentages, and negative numbers.
  • By default, the minimum value in the scale is 0.0. The default max value is 10.0. Product teams can change the scale settings.
  • Product teams can set any number within the range to be the currently selected value. For example:
    • The current year in a range of years.
    • The most commonly selected value.
    • The start of a range of values, where no single value is commonly selected.
  • Product teams may create a custom scale for displaying textual values, such as Low, Medium, and High.

Increments Bookmark this Heading Return to Top

Purpose:

Divide the scale into smaller units.

Usage:

Scales consist of increments between the minimum and maximum values in the range. A slider scale may have up to three types of increments:

  • Major Increments: Correspond to the slider's major tick marks, if displayed. A slider scale must have at least three major increments. The default major increment is one, but product teams can change this as needed.
  • Minor Increments: Correspond to the slider's minor tick marks, if displayed. Minor increments are optional. Minor increments should divide evenly into the number of pixels allocated to each major increment. The relationship between minor and major increments corresponds directly to the relationship between major increments and the Bar.
  • Minimum Increment: Determines the minimum distance the thumb can move, and allows users to position the thumb between minor tick marks, if this is required. The minimum increment is optional.
    • If product teams specify minor increments, the default minimum increment is the same as the minor increment.
    • If neither minimum increment nor minor increments are specified, the default minimum increment is the same as the major increment.

Tick Marks Bookmark this Heading Return to Top

Purpose:

Mark increments on the slider bar.

Description:

  • A slider may have up to three types of tick marks:
    • Major Tick Marks: When displayed, represent the major increments in the scale.
    • Minor Tick Marks: When displayed, represent the minor increments in the scale. Minor tick marks can be displayed only if major tick marks are also present.
    • Zero Tick Mark: The zero tick mark appears only when both positive and negative numbers are on the scale. It cannot be turned off.

A sample horizontal decimal slider and a vertical slider, each showing positive and negative values.

Sliders with Positive and Negative Values

Usage:

  • Major tick marks are strongly recommended as they help users more quickly identify the value to select. Major tick marks should be omitted only when the user is able to understand the slider's scale without the use of tick marks.
  • Minor tick marks are recommended when the precision of the slider's setting is important. For instance, when a manufacturing application must select the exact setting of a good's measurement in order to package it properly, the slider's minor tick marks will help in setting the measure accurately.
  • For optimal data representation, tick marks should be placed at regular intervals. For example, in a scale of 1-10, tick marks should ideally be placed at intervals of 1, 2, or 5 and not at intervals of 3, 4, or 6.
  • Major tick marks may have scale labels; minor ticks marks may not.

Scale Labels Bookmark this Heading Return to Top

Purpose:

Identify minimum and maximum values and major increments on the slider bar.

Description:

There are three types of scale labels:

  • Minimum Value: Appears by default on the first tick mark.
  • Maximum Value: Appears by default on the last tick mark.
  • Major Increment: Optional labels for major tick marks.

Usage:

  • Scale labels may be numbers, decimals, or text, such as Low, Medium, and High.
  • Major tick mark labels help identify increments and are generally used for all sliders. They may be omitted from horizontal sliders if the scale label text occupies too much space, and users can readily identify intermediate values without requiring a label on each tick mark.

Increase/Decrease Buttons Bookmark this Heading Return to Top

Purpose:

Provide an alternate method to increase or decrease the thumb value.

Usage:

  • By default, the Increase/Decrease increment matches the minimum increment. However, product teams may set the Increase/Decrease increment to the minor or major increment.
  • In a range slider, Increase/Decrease buttons move both thumbs at the same time, without changing the range between the thumbs.

Required Field Indicator Bookmark this Heading Return to Top

Purpose:

Identifies fields that must be completed before submitting the page.

  • The Required Field Indicator does not appear if a Slider is disabled or read-only.
  • ADF provides ALT text and tooltips to indicate required fields. Product teams may additionally provide key notation to define the Required Field Indicator. Refer to Key Notation in the Headers guideline for information regarding usage.

Usage:

Although the slider supports a required field indicator, teams should never set a slider as a required field because it is impossible to have a null value on a slider.

Changed Field Indicator Bookmark this Heading Return to Top

Purpose:

Indicates that the value in the slider changed after page submission.

  • ADF provides ALT text and tooltips to indicate changed fields. Product teams may additionally provide key notation to define the Changed Field Indicator. Refer to Key Notation in the Headers guideline for information regarding usage.

Usage:

Same as Text Box.

Help Text Bookmark this Heading Return to Top

Purpose:

Provides users with additional information about the slider.

Usage:

Same as Input/Output Text.