Slider

Demos

Size variants

<template>
<article>
  <veui-slider v-model="value"/>
  <veui-slider
    v-model="value"
    ui="small"
  />
  <veui-slider
    v-model="value"
    ui="tiny"
  />
</article>
</template>

<script>
import { Slider } from 'veui'

export default {
  components: {
    'veui-slider': Slider
  },
  data () {
    return {
      value: 0.5
    }
  }
}
</script>

Read-only/disabled

<template>
<article>
  <veui-slider v-model="value"/>
  <veui-slider
    v-model="value"
    readonly
  />
  <veui-slider
    v-model="value"
    disabled
  />
</article>
</template>

<script>
import { Slider } from 'veui'

export default {
  components: {
    'veui-slider': Slider
  },
  data () {
    return {
      value: 0.5
    }
  }
}
</script>

Stepable

<template>
<article>
  <veui-slider
    v-model="value"
    :min="min"
    :max="max"
    :step="step"
    mark
  />
  <veui-slider
    v-model="value"
    :min="min"
    :max="max"
    :step="step"
  />
</article>
</template>

<script>
import { Slider } from 'veui'

export default {
  components: {
    'veui-slider': Slider
  },
  data () {
    return {
      value: 55,
      min: 0,
      max: 100,
      step: 8
    }
  }
}
</script>

Range

<template>
<article>
  <veui-slider
    v-model="value"
    :min="0"
    :max="100"
  />
</article>
</template>

<script>
import { Slider } from 'veui'

export default {
  components: {
    'veui-slider': Slider
  },
  data () {
    return {
      value: [22, 66]
    }
  }
}
</script>

Secondary bar

<template>
<article>
  <veui-slider
    v-model="videoPlayProgress"
    :secondary-progress="videoBufferProgress"
  />
</article>
</template>

<script>
import { Slider } from 'veui'

export default {
  components: {
    'veui-slider': Slider
  },
  data () {
    return {
      videoPlayProgress: 0.11,
      videoBufferProgress: 0.57
    }
  }
}
</script>

Customization

"hsl(60, 100%, 50%)" , "hsl(120, 100%, 50%)" , "hsl(180, 100%, 50%)" , "hsl(240, 100%, 50%)" , "hsl(300, 100%, 50%)"

<template>
<article>
  <veui-slider
    v-model="value"
    :min="0"
    :max="360"
    :step="1"
    :parse="parseColorHue"
    :format="formatColorHue"
  >
    <div
      slot="track"
      style="width: 100%; height: 20px;"
      :style="{background: colorGradient}"
    />
    <div
      slot="thumb"
      :key="`thumb_${index}`"
      slot-scope="{ index }"
      style="margin-top: 2px"
    >
      <div style="width: 16px; height: 12px">
        <svg
          width="16"
          height="12"
          viewBox="0 0 16 12"
        ><polygon points="8,0 16,12 0,12"/></svg>
      </div>
    </div>
    <template
      slot="tip"
      slot-scope="{ open, activeIndex }"
    >
      <div
        v-show="open"
        class="custom-tip"
        :style="{
          left: `${(activeIndex >= 0 ? parseColorHue(value[activeIndex]) : 0) / 360 * 100}%`,
          backgroundColor: value[activeIndex]
        }"
      />
    </template>
  </veui-slider>
  <div>
    <span
      v-for="(val, index) in value"
      :key="`color-value-${index}`"
    >
      "<span :style="{ color: val }">{{ val }}</span>"
      <span v-if="index < value.length - 1">,</span>
    </span>
  </div>
</article>
</template>

<script></script>

API

Props

Name Type Default Description

ui

string

Style variants.

Value	Description
`small`	Small size.
`tiny`	Tiny size.

value

*|Array<*>

The value of the slider.

By default the type is number and the value should between min and max after parsed by the parse function.

When being the type of Array<number>, multiple thumbs will be rendered corresponding to each value.

When parse and format are specified, values can be of any type, and parse should transform the value to number and format should transform the value to the same type as the value prop. parse and format only need to take care of single values instead of arrays and the component itself will apply transformation on multiple values if necessary.

secondary-progress number|Array<number> 0 Secondary progress value.

min number 0 The minimun value after value is processed by the parse function.

max number 1 The maximum value after value is processed by the parse function.

step number 0 The step value after value is processed by the parse function.

mark boolean false Whether to display step marks.

parse function val => val The parse function to transform input value.

format function val => val The format function to transform output value.

Slots

Name Description

track The track of the slider. Displays a bar by default.

tip-label The tooltip content. Displays the current value or its item by default.

thumb

The thumb(s) of the slider. Displays a round button by default.

Name	Type	Description
`index`	`number`	The index of current thumb.
`focus`	`boolean`	Whether current thumb is focused.
`hover`	`boolean`	Whether user is pointing current thumb.
`dragging`	`boolean`	Whether the current thumb is being dragged.

tip

The entire tooltip for each thumb. Displays a Tooltip component with value as its content by default.

Name	Type	Description
`target`	`HTMLElement`	The rendered `Element` for current thumb.
`open`	`boolean`	Whether there is any active thumb.
`active-index`	`boolean`	The index of the current active thumb.

Events

Name	Description
`input`	`v-model` Triggered after the value changed. The callback parameter type is `(value: *)`, where `value` is the new value (transformed by the `format` function).