Range Slider

import { RangeSlider } from "mates-ui";

RangeSlider({ value: [20, 80], onChange: () => {} });

Basic range

99

1

2

3

4

5

6

7

8

9

10

11

12

13

14

›

⌄

import { html, atom, renderApp } from 'mates';

import { RangeSlider, Text } from 'mates-ui';

const App = () => {

const range = atom([20, 75]);

return () => html`

<x-col gap="var(--md-space-3)" style="max-width:35rem;width:100%;">

${RangeSlider({ value: range(), onChange: (v) => range.set(v), label: "Value range" })}

${Text(range()[0] + " – " + range()[1], { type: "body-sm", color: "muted" })}

</x-col>

`;

};

renderApp(App, document.getElementById('app'));

Formatted value labels

99

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

›

⌄

import { html, atom, renderApp } from 'mates';

import { RangeSlider } from 'mates-ui';

const App = () => {

const pct = atom([10, 90]);

const price = atom([150, 800]);

return () => html`

<x-col gap="var(--md-space-6)" style="max-width:35rem;width:100%;">

${RangeSlider({ value: pct(), onChange: (v) => pct.set(v), label: "Percentage", showTips: true, format: (v) => v + "%" })}

${RangeSlider({ value: price(), onChange: (v) => price.set(v), label: "Price", min: 0, max: 1000, step: 10, showTips: true, format: (v) => "$" + v })}

</x-col>

`;

};

renderApp(App, document.getElementById('app'));

Step and ticks

99

1

2

3

4

5

6

7

8

9

10

11

12

13

›

⌄

import { html, atom, renderApp } from 'mates';

import { RangeSlider } from 'mates-ui';

const App = () => {

const range = atom([20, 60]);

return () => html`

<x-col gap="var(--md-space-4)" style="max-width:35rem;width:100%;">

${RangeSlider({ value: range(), onChange: (v) => range.set(v), label: "Coarse range (step 10)", step: 10, showTips: true })}

</x-col>

`;

};

renderApp(App, document.getElementById('app'));

Disabled

99

1

2

3

4

5

6

7

8

9

10

›

import { html, renderApp } from 'mates';

import { RangeSlider } from 'mates-ui';

const App = () => () => html`

<div style="max-width:35rem;width:100%;">

${RangeSlider({ value: [30, 70], disabled: true, label: "Disabled range", showTips: true })}

</div>

`;

renderApp(App, document.getElementById('app'));

Focus trap between handles

99

1

2

3

4

5

6

7

8

9

10

11

12

13

14

›

⌄

import { html, atom, renderApp } from 'mates';

import { RangeSlider, Text } from 'mates-ui';

const App = () => {

const range = atom([15, 85]);

return () => html`

<x-col gap="var(--md-space-4)" style="max-width:35rem;width:100%;">

${Text("Tab / Shift+Tab cycle only the two handles. Escape blurs.", { type: "body-sm", color: "muted" })}

${RangeSlider({ value: range(), onChange: (v) => range.set(v), label: "Trap between handles", trapFocus: true })}

</x-col>

`;

};

renderApp(App, document.getElementById('app'));

Single Slider (for reference)

99

1

2

3

4

5

6

7

8

9

10

11

12

13

14

›

⌄

import { html, atom, renderApp } from 'mates';

import { Slider, Text } from 'mates-ui';

const App = () => {

const val = atom(45);

return () => html`

<x-col gap="var(--md-space-3)" style="max-width:35rem;width:100%;">

${Slider({ value: val(), showTip: true, label: "Single value", onInput: (v) => val.set(v) })}

${Text("Value: " + val(), { type: "body-sm", color: "muted" })}

</x-col>

`;

};

renderApp(App, document.getElementById('app'));

Track height

99

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

›

⌄

import { html, atom, renderApp } from 'mates';

import { RangeSlider, Slider } from 'mates-ui';

const App = () => {

const range = atom([25, 75]);

return () => html`

<x-col gap="var(--md-space-5)" style="max-width:35rem;width:100%;">

${RangeSlider({ value: range(), onChange: (v) => range.set(v), label: "Default — 0.25rem" })}

${RangeSlider({ value: range(), onChange: (v) => range.set(v), label: "0.375rem", trackHeight: "0.375rem", showTips: true })}

${RangeSlider({ value: range(), onChange: (v) => range.set(v), label: "0.5rem + marks", trackHeight: "0.5rem", showTips: true, marks: true, step: 10 })}

${RangeSlider({ value: range(), onChange: (v) => range.set(v), label: "0.75rem", trackHeight: "0.75rem", showTips: true })}

${Slider({ value: range()[0], trackHeight: "0.5rem", showTip: true, marks: true, step: 10, label: "Single — 0.5rem", onInput: (v) => range.set([v, range()[1]]) })}

</x-col>

`;

};

renderApp(App, document.getElementById('app'));