vm-slider

A custom styled and ARIA friendly input[type="range"] component for inputting numeric values. In addition, there are optimizations made for improved touch support (more information can be found at https://github.com/sampotts/rangetouch).

Usage

HTML

<vm-slider step="5" max="100" value="50" label="Volume" />

<script>

const slider = document.querySelector('vm-slider');

slider.addEventListener('vmValueChange', event => {

const newValue = event.detail;

});

</script>

React

import React, { useState } from 'react';

import { Slider } from '@vime/react';

function Example() {

const [value, setValue] = useState(50);

const onValueChange = (event: CustomEvent<number>) => {

setValue(event.detail);

};

return (

<Slider

label="Volume"

step={5}

max={100}

value={value}

onVmValueChange={onValueChange}

/>

);

}

Vue

example.vue

<template>

<Slider

label="Volume"

:step="5"

:max="100"

:value="value"

@vmValueChange="onValueChange"

/>

</template>

<script>

import { Slider } from '@vime/vue';

export default {

components: {

Slider,

},

data: {

value: 50,

},

methods: {

onValueChange(value) {

this.value = value;

},

},

};

</script>

Svelte

<Slider

label="Volume"

step={5}

max={100}

value={value}

on:vmValueChange={onValueChange}

/>

<script lang="ts">

import { Slider } from '@vime/svelte';

let value = 50;

const onValueChange = (event: CustomEvent<number>) => {

value = event.detail;

};

</script>

Stencil

class Example {

@State() value = 50;

private onValueChange(event: CustomEvent<number>) {

this.value = event.detail;

}

render() {

return (

<Slider

label="Volume"

step={5}

max={100}

value={this.value}

onVmValueChange={this.onValueChange.bind(this)}

/>

);

}

}

Angular

example.html

<vm-slider

label="Volume"

[step]="5"

[max]="100"

[value]="value"

(vmValueChange)="onValueChange($event)"

/>

example.ts

class Example {

value = 50;

onValueChange(event: CustomEvent<number>) {

this.value = event.detail;

}

}

Properties

Property	Description	Type	Default
label	A human-readable label for the purpose of the slider.	string ∣ undefined	undefined
max	The greatest permitted value.	number	10
min	The lowest value in the range of permitted values.	number	0
step	A number that specifies the granularity that the value must adhere to.	number	1
value	The current value.	number	5
valueText	Human-readable text alternative for the current value. Defaults to value:max percentage.	string ∣ undefined	undefined

Events

Event	Description	Type
vmBlur	Emitted when the slider loses focus.	CustomEvent<void>
vmFocus	Emitted when the slider receives focus.	CustomEvent<void>
vmValueChange	Emitted when the value of the underlying input field changes.	CustomEvent<number>

CSS Custom Properties

Name	Description
--vm-slider-thumb-bg	The background color of the slider thumb.
--vm-slider-thumb-height	The height of the slider thumb.
--vm-slider-thumb-shadow	The shadow cast around the slider thumb.
--vm-slider-thumb-width	The width of the slider thumb.
--vm-slider-track-color	The color of the track.
--vm-slider-track-focused-height	The height of the track when it is focused.
--vm-slider-track-height	The height of the track.
--vm-slider-value-color	The color of the part of the track filled upto the current value.

Dependencies

Used by

• vm-scrubber-control
• vm-volume-control