Element: <oj-slider>

Oracle® JavaScript Extension Toolkit (JET)
16.0.0
F83703-01

DOM Interface: SliderElement

Version:
  • 16.0.0
Since:
  • 0.7.0
.oj-focus-highlight
Under normal circumstances this class is applied automatically. It is documented here for the rare cases that an app developer needs per-instance control.

The oj-focus-highlight class applies focus styling that may not be desirable when the focus results from pointer interaction (touch or mouse), but which is needed for accessibility when the focus occurs by a non-pointer mechanism, for example keyboard or initial page load.

The application-level behavior for this component is controlled in the theme by the $focusHighlightPolicy SASS variable; however, note that this same variable controls the focus highlight policy of many components and patterns. The values for the variable are:

nonPointer: oj-focus-highlight is applied only when focus is not the result of pointer interaction. Most themes default to this value.
all: oj-focus-highlight is applied regardless of the focus mechanism.
none: oj-focus-highlight is never applied. This behavior is not accessible, and is intended for use when the application wishes to use its own event listener to precisely control when the class is applied (see below). The application must ensure the accessibility of the result.

To change the behavior on a per-instance basis, the application can set the SASS variable as desired and then use event listeners to toggle this class as needed.
Example
<oj-slider class="oj-focus-highlight">
  <!-- Content -->
</oj-slider>
.oj-form-control-full-width
Changes the max-width to 100% so that form components will occupy all the available horizontal space.
Example
<oj-slider class="oj-form-control-full-width">
</oj-slider>

Category: Max Width

Note: This category of style classes is not supported in the following themes: Alta

In the Redwood theme the default max width of a text field is 100%. These max width convenience classes are available to create a medium or small field.
The class is applied to the root element.

Classes:

.oj-form-control-max-width-sm
.oj-form-control-max-width-md

Example
<oj-slider class="oj-form-control-max-width-md"></oj-slider>

Category: Width

Note: This category of style classes is not supported in the following themes: Alta

In the Redwood theme the default width of a text field is 100%. These width convenience classes are available to create a medium or small field.
The class is applied to the root element.

Classes:

.oj-form-control-width-sm
.oj-form-control-width-md

Example
<oj-slider class="oj-form-control-width-md"></oj-slider>

CSS Variables

See JET CSS Variables for additional details.
Name Type Description
--oj-slider-thumb-width <length> Slider thumb width
--oj-slider-thumb-height <length> Slider thumb height
--oj-slider-thumb-border-radius <length> | <percentage> Slider thumb border radius
--oj-slider-thumb-border-width <length> Slider thumb border width
--oj-slider-track-thickness <length> Slider track thickness
Enabled
CSS variables used by oj-slider when enabled
Name Type Description
--oj-slider-thumb-bg-color <color> Slider thumb background color when enabled
--oj-slider-thumb-border-color <color> Slider thumb border color when enabled
--oj-slider-thumb-box-shadow Slider thumb box shadow when enabled
--oj-slider-track-bg-color <color> Slider track background color when enabled
--oj-slider-value-bg-color <color> Slider value background color when enabled
Hovered
CSS variables used by oj-slider when hovered
Name Type Description
--oj-slider-thumb-bg-color-hover <color> Slider thumb background color when hovered
--oj-slider-thumb-box-shadow-hover Slider thumb box shadow when hovered
Active
CSS variables used by oj-slider when active
Name Type Description
--oj-slider-thumb-bg-color-active <color> Slider thumb background color when active
--oj-slider-thumb-border-color-active <color> Slider thumb border color when active
--oj-slider-thumb-box-shadow-active Slider thumb box shadow when active
--oj-slider-thumb-scale-active <number> Slider thumb scale when active
Disabled
CSS variables used by oj-slider when disabled
Name Type Description
--oj-slider-thumb-bg-color-disabled <color> Slider thumb background color when disabled
--oj-slider-thumb-border-color-disabled <color> Slider thumb border color when disabled
--oj-slider-track-bg-color-disabled <color> Slider track background color when disabled
--oj-slider-value-bg-color-disabled <color> Slider value background color when disabled