vime-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).

Visual

Usage

HTML

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

<script>

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

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

const newValue = event.detail;

});

</script>

React

import React, { useState } from 'react';

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

function Example() {

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

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

setValue(event.detail);

};

return (

<VimeSlider

label="Volume"

step={5}

max={100}

value={value}

onVValueChange={onValueChange}

/>

);

}

Vue

example.vue

<template>

<VimeSlider

label="Volume"

:step="5"

:max="100"

:value="value"

@vValueChange="onValueChange"

/>

</template>

<script>

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

export default {

components: {

VimeSlider,

},

data: {

value: 50,

},

methods: {

onValueChange(value) {

this.value = value;

},

},

};

</script>

Svelte

<VimeSlider

label="Volume"

step={5}

max={100}

value={value}

on:vValueChange={onValueChange}

/>

<script lang="ts">

import { VimeSlider } 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 (

<VimeSlider

label="Volume"

step={5}

max={100}

value={this.value}

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

/>

);

}

}

Angular

example.html

<vime-slider

label="Volume"

[step]="5"

[max]="100"

[value]="value"

(vValueChange)="onValueChange($event)"

/>

example.ts

class Example {

value = 50;

onValueChange(event: CustomEvent<number>) {

this.value = event.detail;

}

}

Properties

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

Events

Event	Description	Type
vValueChange	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

• vime-scrubber-control
• vime-volume-control

Graph

graph TD;

vime-scrubber-control --> vime-slider

vime-volume-control --> vime-slider

style vime-slider fill:#f9f,stroke:#333,stroke-width:4px

---

Built with StencilJS