`<c-slider>`

Examples

Basic

Vue

React

Angular

TypeScript

<template>
  <div>
    <c-slider v-model="volume" label="Volume" />

    <p>Value: {{ volume }} %</p>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const volume = ref(40);
</script>

Ticks

Vue

React

Angular

TypeScript

<template>
  <div>
    <c-slider
      v-model="cores"
      label="CPU cores"
      labels
      max="8"
      min="0"
      segments="8"
      step="1"
      ticks
      unit=""
    />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const cores = ref(2);
</script>

API reference

`<c-slider>`

Properties

Property	Attribute	Type	Default	Description
`ariaLabelInternal`	`aria-label-internal`	`string`	`''`	Aria label
`disabled`	`disabled`	`boolean`	`false`	Disable the slider
`disableTooltip`	`disable-tooltip`	`boolean`	`false`	Disable tooltip
`hostId`	`host-id`	`string`	`''`	Id of the element
`hostName`	`host-name`	`string`	`''`	Id of the element
`label`	`label`	`string`	`''`	Label of the slider
`labels`	`labels`	`boolean`	`false`	Show tick labels
`max`	`max`	`number \| string`	`'100'`	Max value
`min`	`min`	`number \| string`	`'0'`	Min value
`segments`	`segments`	`number \| string`	`'10'`	Segment count
`step`	`step`	`number \| string`	`'1'`	Step
`ticks`	`ticks`	`boolean`	`false`	Thow ticks
`unit`	`unit`	`string`	`'%'`	Unit
`value`	`value`	`number \| string`	`'50'`	Value

Events

Event	Detail	Description
`changeValue`	`number \| string`	Fired on every thumb movement, carrying the new slider value — a number when the current `value` prop is a number, otherwise a string. Also dispatched as `change-value` — bind that name in Vue templates.
`input`	`void`	Native bubbling input event fired on every thumb movement so a plain Vue `v-model` works without the `v-control` directive. No detail.
`update:value`	`number \| string`	v-model contract event fired on every thumb movement, carrying the new slider value — a number when the current `value` prop is a number, otherwise a string.

CSS parts

Style from outside with c-slider::part(name) — parts are the library's only styling customization API.

Part	Description
`root`	The outer wrapper containing the label, range input and track
`label`	The label element rendered above the slider
`ticks`	The visible track below the input, carrying the progress fill and tick marks