stable css 1.3.1 · js 1.2.0

Range

A flat slider with a live coloured fill and a live output. Single or dual-thumb. Configure it with data-* attributes — link ng_range.js.

A ng-range root with data-ng-range wraps a label (with a ng-range-output), the native input[type=range] and optional ng-range-marks. The script reads data-min/max/jump/value, paints the fill and keeps the output in sync. Drag the sliders below.

Single

Volume 40

0100

range.html

<div class="ng-range" data-ng-range data-min="0" data-max="100" data-jump="5" data-value="40">
    <label class="ng-label">Volume <output class="ng-range-output">40</output></label>
    <input type="range" class="ng-range-input">
    <div class="ng-range-marks"><span>0</span><span>100</span></div>
</div>

Dual-thumb

Add ng-range-dual and two inputs (ng-range-min / ng-range-max) inside a ng-range-track. The thumbs cannot cross.

Price 200 – 800

01000

range.html

<div class="ng-range ng-range-dual" data-ng-range
     data-min="0" data-max="1000" data-jump="10"
     data-value-min="200" data-value-max="800">
    <label class="ng-label">Price <output class="ng-range-output">200 – 800</output></label>
    <div class="ng-range-track">
        <input type="range" class="ng-range-input ng-range-min">
        <input type="range" class="ng-range-input ng-range-max">
    </div>
    <div class="ng-range-marks"><span>0</span><span>1000</span></div>
</div>

Colors

Tint the fill with ng-range-<color> — every framework colour token works.

Primary 60

Secondary 60

Success 60

Info 60

Warning 60

Danger 60

Mute 60

Blue 60

Blue Sky 60

Green 60

Lime 60

Aguagreen 60

Indigo 60

Purple 60

Purple Heart 60

Cyan 60

Magenta 60

Yellow 60

range.html

<div class="ng-range ng-range-primary mb-16" data-ng-range data-min="0" data-max="100" data-value="60">
    <label class="ng-label">Primary <output class="ng-range-output">60</output></label>
    <input type="range" class="ng-range-input">
</div>
<div class="ng-range ng-range-secondary mb-16" data-ng-range data-min="0" data-max="100" data-value="60">
    <label class="ng-label">Secondary <output class="ng-range-output">60</output></label>
    <input type="range" class="ng-range-input">
</div>
<div class="ng-range ng-range-success mb-16" data-ng-range data-min="0" data-max="100" data-value="60">
    <label class="ng-label">Success <output class="ng-range-output">60</output></label>
    <input type="range" class="ng-range-input">
</div>
<div class="ng-range ng-range-info mb-16" data-ng-range data-min="0" data-max="100" data-value="60">
    <label class="ng-label">Info <output class="ng-range-output">60</output></label>
    <input type="range" class="ng-range-input">
</div>
<div class="ng-range ng-range-warning mb-16" data-ng-range data-min="0" data-max="100" data-value="60">
    <label class="ng-label">Warning <output class="ng-range-output">60</output></label>
    <input type="range" class="ng-range-input">
</div>
<div class="ng-range ng-range-danger mb-16" data-ng-range data-min="0" data-max="100" data-value="60">
    <label class="ng-label">Danger <output class="ng-range-output">60</output></label>
    <input type="range" class="ng-range-input">
</div>
<div class="ng-range ng-range-mute mb-16" data-ng-range data-min="0" data-max="100" data-value="60">
    <label class="ng-label">Mute <output class="ng-range-output">60</output></label>
    <input type="range" class="ng-range-input">
</div>
<div class="ng-range ng-range-blue mb-16" data-ng-range data-min="0" data-max="100" data-value="60">
    <label class="ng-label">Blue <output class="ng-range-output">60</output></label>
    <input type="range" class="ng-range-input">
</div>
<div class="ng-range ng-range-blue-sky mb-16" data-ng-range data-min="0" data-max="100" data-value="60">
    <label class="ng-label">Blue Sky <output class="ng-range-output">60</output></label>
    <input type="range" class="ng-range-input">
</div>
<div class="ng-range ng-range-green mb-16" data-ng-range data-min="0" data-max="100" data-value="60">
    <label class="ng-label">Green <output class="ng-range-output">60</output></label>
    <input type="range" class="ng-range-input">
</div>
<div class="ng-range ng-range-lime mb-16" data-ng-range data-min="0" data-max="100" data-value="60">
    <label class="ng-label">Lime <output class="ng-range-output">60</output></label>
    <input type="range" class="ng-range-input">
</div>
<div class="ng-range ng-range-aguagreen mb-16" data-ng-range data-min="0" data-max="100" data-value="60">
    <label class="ng-label">Aguagreen <output class="ng-range-output">60</output></label>
    <input type="range" class="ng-range-input">
</div>
<div class="ng-range ng-range-indigo mb-16" data-ng-range data-min="0" data-max="100" data-value="60">
    <label class="ng-label">Indigo <output class="ng-range-output">60</output></label>
    <input type="range" class="ng-range-input">
</div>
<div class="ng-range ng-range-purple mb-16" data-ng-range data-min="0" data-max="100" data-value="60">
    <label class="ng-label">Purple <output class="ng-range-output">60</output></label>
    <input type="range" class="ng-range-input">
</div>
<div class="ng-range ng-range-purple-heart mb-16" data-ng-range data-min="0" data-max="100" data-value="60">
    <label class="ng-label">Purple Heart <output class="ng-range-output">60</output></label>
    <input type="range" class="ng-range-input">
</div>
<div class="ng-range ng-range-cyan mb-16" data-ng-range data-min="0" data-max="100" data-value="60">
    <label class="ng-label">Cyan <output class="ng-range-output">60</output></label>
    <input type="range" class="ng-range-input">
</div>
<div class="ng-range ng-range-magenta mb-16" data-ng-range data-min="0" data-max="100" data-value="60">
    <label class="ng-label">Magenta <output class="ng-range-output">60</output></label>
    <input type="range" class="ng-range-input">
</div>
<div class="ng-range ng-range-yellow mb-16" data-ng-range data-min="0" data-max="100" data-value="60">
    <label class="ng-label">Yellow <output class="ng-range-output">60</output></label>
    <input type="range" class="ng-range-input">
</div>

Sizes

ng-range-sm and ng-range-lg (medium is the default).

Small 30

Medium 50

Large 70

range.html

<div class="ng-range ng-range-sm mb-16" data-ng-range data-min="0" data-max="100" data-value="30">
    <label class="ng-label">Small <output class="ng-range-output">30</output></label>
    <input type="range" class="ng-range-input">
</div>
<div class="ng-range mb-16" data-ng-range data-min="0" data-max="100" data-value="50">
    <label class="ng-label">Medium <output class="ng-range-output">50</output></label>
    <input type="range" class="ng-range-input">
</div>
<div class="ng-range ng-range-lg" data-ng-range data-min="0" data-max="100" data-value="70">
    <label class="ng-label">Large <output class="ng-range-output">70</output></label>
    <input type="range" class="ng-range-input">
</div>

Options

`data-min` / `data-max`	Bounds (default `0` / `100`).
`data-jump`	Step between values (default `1`).
`data-value`	Initial value — single only (default `min`).
`data-value-min` / `data-value-max`	Initial values — dual only.
`data-format`	Name of a global function `window[name](v)` formatting the output.
`data-output-sep`	Separator between dual values in the output (default `" – "`).

API & events

app.js

// per-instance API
const range = document.querySelector('.ng-range').__ngRange;
range.get();                 // current value (or {min, max} for dual)
range.set(75);               // single
range.set({min: 100, max: 600}); // dual
range.reset();

// events (dispatched on the root)
root.addEventListener('ng:range:input',  e => console.log(e.detail)); // while dragging
root.addEventListener('ng:range:change', e => console.log(e.detail)); // on commit

Anatomy

ng-range data-ng-range ng-range-input ng-range-output ng-range-marks ng-range-dual ng-range-track ng-range-min ng-range-max

Variants & events

ng-range-{color} ng-range-sm ng-range-lg ng:range:input ng:range:change

Reference

Generated from the component source (_ng_range.scss · ng_range.js).

Component info

Name	`range`
Type	`css+js`
Version	`css 1.3.1 · js 1.2.0`
Status	`stable`
CSS	`/assets/css/components/_ng_range.scss`
JS	`/assets/js/ng_range.js`

Classes

.ng-label .ng-range .ng-range- .ng-range-alpha .ng-range-dual .ng-range-hue .ng-range-input .ng-range-lg .ng-range-marks .ng-range-output .ng-range-sm .ng-range-ticks .ng-range-track .ng-range-vertical

Tokens

--ng-range-alpha-color --ng-range-checker-a --ng-range-checker-b --ng-range-checker-size --ng-range-disabled-opacity --ng-range-fill --ng-range-fill-bg --ng-range-length --ng-range-marks-color --ng-range-max --ng-range-min --ng-range-output-color --ng-range-step-pct --ng-range-thumb-bg --ng-range-thumb-border --ng-range-thumb-size --ng-range-tick-color --ng-range-tick-w --ng-range-track-bg --ng-range-track-h

Events

ng:range:change ng:range:copy ng:range:copy-error ng:range:input