Sliders

Variables

md-slider-include-discrete
$md-slider-include-discrete: true !default;
Sass (Scss)

Description

Boolean if the styles for discrete sliders should be included.

Type

Boolean
md-slider-include-editor
$md-slider-include-editor: true !default;
Sass (Scss)

Description

Boolean if an editable slider's style should be included.

Type

Boolean
md-slider-include-indicators
$md-slider-include-indicators: true !default;
Sass (Scss)

Description

Boolean if the styles for displaying indicators and icons with a slider should be included

Type

Boolean
md-slider-height
$md-slider-height: $md-height !default;
Sass (Scss)

Description

The default height for the Slider's container.

Type

Number

Used by

md-slider-thumb-z-index
$md-slider-thumb-z-index: 5 !default;
Sass (Scss)

Description

The z-index for the Slider's thumb.

Type

Number

Used by

md-slider-thumb-active-scale
$md-slider-thumb-active-scale: 1.5 !default;
Sass (Scss)

Description

The scale to use when the slider is active. This will be applied to the scale transform on the thumb.

Type

Number

Used by

md-slider-thumb-disabled-scale
$md-slider-thumb-disabled-scale: .75 !default;
Sass (Scss)

Description

The scale to use when the slider is disabled. This will be applied to the scale transform on the thumb.

Type

Number

Used by

md-slider-discrete-tick-height
$md-slider-discrete-tick-height: $md-slider-track-height !default;
Sass (Scss)

Description

The height for a Discrete Slider's tick.

Type

Number

Used by

md-slider-discrete-ink-transition-time
$md-slider-discrete-ink-transition-time: $md-transition-time * 2 !default;
Sass (Scss)

Description

The transition time to use for the Discrete Slider's ink appearance when the user focuses with the keyboard.

Type

Number

Used by

md-slider-mask-ink-opacity
$md-slider-mask-ink-opacity: .15 !default;
Sass (Scss)

Description

The opacity to use for the Slider's thumb ink. This will appear when the user focuses with the keyboard or touches the slider on a mobile device.

This opacity will be applied to the $primary-color.

Type

Number

Used by

md-slider-discrete-mask-ink-opacity
$md-slider-discrete-mask-ink-opacity: .3 !default;
Sass (Scss)

Description

The opacity to use for the discrete Slider's thumb ink. This will appear when the user focuses with the keyboard.

This opacity will be applied to the $primary-color.

Type

Number

Used by

md-slider-light-theme-off-color
$md-slider-light-theme-off-color: rgba($md-black-base, .26) !default;
Sass (Scss)

Description

The off color to use for the Slider when using the light theme.

Type

Color

Used by

md-slider-dark-theme-off-color
$md-slider-dark-theme-off-color: rgba($md-white-base, .3) !default;
Sass (Scss)

Description

The off color to use for the Slider when using the dark theme.

Type

Color

Used by

md-slider-warn-md
$md-slider-warn-md: true !default;
Sass (Scss)

Description

Boolean if the sliders should warn when not using a correct swatch. This warning will only occur when using the dark theme and the primary color does not have a -200 suffix. APPARENTLY this is a requirement for Material Design. Feel free to disable this warning.

Type

Boolean

Used by

See

Functions

validate-slider-primary-color
@function validate-slider-primary-color($primary-color, $light-theme) {}
Sass (Scss)
Click to expand

Description

A helper function to validate that a $primary-color has a -200 suffix when using the dark theme. It doesn't actually output anything with sass-loader atm though. :/

Parameters

NameDescriptionTypeDefault value
$primary-color

The primary color to validate.

Color
$light-theme

Boolean if the current theme is the light theme.

Boolean

Returns

Boolean

true if the primary color is valid or false if it is invalid.

Requires

Used by

Mixins

react-md-sliders
@mixin react-md-sliders($primary-color: $md-primary-color, $light-theme: $md-light-theme, $include-media: $md-media-included, $include-discrete: $md-slider-include-discrete, $include-editor: $md-slider-include-editor, $include-indicators: $md-slider-include-indicators) {}
Sass (Scss)
Click to expand

Description

This includes the react-md Sliders Component scss.

Parameters

NameDescriptionTypeDefault value
$primary-color

The primary color to use for the slider. This will be the non-disabled track's fill color and the non-disabled thumb's color. If you are using the dark-theme, This value should be the primary color with a -200 suffix.

Color
$md-primary-color
$light-theme

A boolean if the application using the light theme.

Boolean
$md-light-theme
$include-media

Boolean if the media queries should be included.

Boolean
$md-media-included
$include-discrete

A boolean if the discrete slider's scss should be included.

Boolean
$md-slider-include-discrete
$include-editor

A boolean if the editable slider's scss should be included.

Boolean
$md-slider-include-editor
$include-indicators

A boolean if the small scss for displaying indicators/icons with the slider should be included.

Boolean
$md-slider-include-indicators

Requires

Used by

react-md-discrete-slider
@mixin react-md-discrete-slider($primary-color: $md-primary-color, $light-theme: $md-light-theme) {}
Sass (Scss)
Click to expand

Description

This will include the styles for a discrete Slider.

Parameters

NameDescriptionTypeDefault value
$primary-color

The primary color to style the Slider with.

Color
$md-primary-color
$light-theme

A boolean if the slider should be styled for the light or dark theme.

Boolean
$md-light-theme

Requires

Used by

react-md-editable-slider
@mixin react-md-editable-slider {}
Sass (Scss)
Click to expand

Description

This includes the small scss for displaying an editable slider.

Parameters

None

Used by

react-md-slider-indicators
@mixin react-md-slider-indicators($include-media: $md-media-included) {}
Sass (Scss)
Click to expand

Description

This includes the small scss for displaying .md-icon or indicators with a Slider.

Parameters

NameDescriptionTypeDefault value
$include-media

Boolean if the media queries should be included.

Boolean
$md-media-included

Requires

Used by

react-md-slider-indicators-mobile
@mixin react-md-slider-indicators-mobile {}
Sass (Scss)
Click to expand

Description

Creates the CSS for the slider indicators on mobile devices. This should most likely be used within a media query.

Parameters

None

Examples

Example Usage SCSS

@media #{$md-mobile-media} {
  @include react-md-slider-indicators-mobile;
}
Sass (Scss)

Requires

Used by

react-md-slider-indicators-desktop
@mixin react-md-slider-indicators-desktop {}
Sass (Scss)
Click to expand

Description

Creates the CSS for the slider indicators on desktop screens. This should most likely be used within a media query.

Parameters

None

Examples

Example Usage SCSS

@media #{$md-desktop-media} {
  @include react-md-slider-indicators-desktop;
}
Sass (Scss)

Requires

Used by

react-md-slider-indicators-media
@mixin react-md-slider-indicators-media {}
Sass (Scss)
Click to expand

Description

Includes the mobile and desktop media queries for the slider indicators.

Parameters

None

Examples

Basic Usage SCSS

@include react-md-slider-indicators-media;
Sass (Scss)

Requires

Used by

react-md-theme-sliders
@mixin react-md-theme-sliders($primary-color: $md-primary-color, $light-theme: $md-light-theme, $include-discrete: $md-slider-include-discrete) {}
Sass (Scss)
Click to expand

Description

This will theme the Slider component with an updated primary-color and optionally a switch in themes.

Parameters

NameDescriptionTypeDefault value
$primary-color

The primary color to use for the slider. This will be the non-disabled track's fill color and the non-disabled thumb's color. If you are using the dark-theme, This value should be the primary color with a -200 suffix.

Color
$md-primary-color
$light-theme

A boolean if the application using the light theme.

Boolean
$md-light-theme
$include-discrete

A boolean if the discrete Slider scss should be themed as well.

Boolean
$md-slider-include-discrete

Requires

Used by

react-md-theme-discrete-slider
@mixin react-md-theme-discrete-slider($primary-color: $md-primary-color, $light-theme: $md-light-theme) {}
Sass (Scss)
Click to expand

Description

This will update the discrete Slider with the new $primary-color.

Parameters

NameDescriptionTypeDefault value
$primary-color

The primary color to theme the discrete Slider with.

Color
$md-primary-color
$light-theme

Boolean if the discrete Slider should be themed for the light or dark theme.

Boolean
$md-light-theme

Requires

Used by