JSPM – @spectrum-web-components/slider@0.6.3-alpha.17+78878f74

Package Exports

@spectrum-web-components/slider
@spectrum-web-components/slider/custom-elements.json
@spectrum-web-components/slider/package.json
@spectrum-web-components/slider/sp-slider
@spectrum-web-components/slider/sp-slider.js
@spectrum-web-components/slider/src/Slider.d.ts
@spectrum-web-components/slider/src/Slider.js
@spectrum-web-components/slider/src/Slider.js.map
@spectrum-web-components/slider/src/Slider.ts
@spectrum-web-components/slider/src/index.d.ts
@spectrum-web-components/slider/src/index.js
@spectrum-web-components/slider/src/index.js.map
@spectrum-web-components/slider/src/index.ts
@spectrum-web-components/slider/src/slider.css
@spectrum-web-components/slider/src/slider.css.d.ts
@spectrum-web-components/slider/src/slider.css.js
@spectrum-web-components/slider/src/slider.css.js.map
@spectrum-web-components/slider/src/slider.css.ts
@spectrum-web-components/slider/src/spectrum-config.js
@spectrum-web-components/slider/src/spectrum-slider.css
@spectrum-web-components/slider/src/spectrum-slider.css.d.ts
@spectrum-web-components/slider/src/spectrum-slider.css.js
@spectrum-web-components/slider/src/spectrum-slider.css.js.map
@spectrum-web-components/slider/src/spectrum-slider.css.ts
@spectrum-web-components/slider/src/spectrum-vars.json

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@spectrum-web-components/slider) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Description

<sp-slider> allows users to quickly select a value within a range. They should be used when the upper and lower bounds to the range are invariable.

Usage

yarn add @spectrum-web-components/slider

Import the side effectful registration of <sp-slider> via:

import '@spectrum-web-components/slider/sp-slider.js';

When looking to leverage the Slider base class as a type and/or for extension purposes, do so via:

import { Slider } from '@spectrum-web-components/slider';

Variants

Standard

<sp-slider></sp-slider>
<sp-slider disabled></sp-slider>

With Label

<sp-slider label="Slider Label"></sp-slider>
<sp-slider label="Slider Label - Disabled" disabled></sp-slider>

Filled

<sp-slider label="Slider Label" variant="filled"></sp-slider>
<sp-slider
    label="Slider Label - Disabled"
    variant="filled"
    disabled
></sp-slider>

Tick

<sp-slider label="Slider Label" variant="tick" tick-step="5"></sp-slider>
<sp-slider
    label="Slider Label - Disabled"
    variant="tick"
    tick-step="5"
    disabled
></sp-slider>

Tick with Labels

<sp-slider
    label="Slider Label"
    variant="tick"
    tick-step="5"
    tick-labels
></sp-slider>
<sp-slider
    label="Slider Label - Disabled"
    variant="tick"
    tick-step="5"
    tick-labels
    disabled
></sp-slider>

Ramp

<sp-slider label="Slider Label" variant="ramp"></sp-slider>
<sp-slider label="Slider Label - Disabled" variant="ramp" disabled></sp-slider>