Slider

Demos

Size variants

Available size variants for the ui prop: s / m.

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

<script>
import { Slider } from 'veui'

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

Read-only/disabled

Use the readonly prop to set a slider read-only. Use the disabled prop to set a slider disabled.

Edit this page on GitHubEdit

<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>

Steps

Use the step to make value change by specified step value when clicking spinner buttons, or pressing ▴ or ▾.

Edit this page on GitHubEdit

<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

Use the max / min props to specify the values at both ends of the slider.

Edit this page on GitHubEdit

<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

Use the secondary-progress prop to specify a secondary progress bar.

Edit this page on GitHubEdit

<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

Use the thumb / tip slots to customize the content of slider thumb and tooltip.

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

Edit this page on GitHubEdit

<template>
<article>
  <veui-slider
    v-model="value"
    :min="0"
    :max="360"
    :step="1"
    :parse="parseColorHue"
    :format="formatColorHue"
  >
    <template #track>
      <div
        style="width: 100%; height: 20px;"
        :style="{background: colorGradient}"
      />
    </template>
    <template #thumb="{ index }">
      <div
        :key="`thumb_${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>
    <template #tip="{ 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>
  <section>
    <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>
  </section>
</article>
</template>

<script>
import { Slider } from 'veui'

export default {
  components: {
    'veui-slider': Slider
  },
  data () {
    let value = [1, 1, 1, 1, 1].map((_, i) => `hsl(${(i + 1) * 60}, 50%, 50%)`)
    return { value }
  },
  computed: {
    colorGradient () {
      let colors = [1, 1, 1, 1, 1, 1, 1].map(function (_, index) {
        return `hsl(${60 * index}, 50%, 50%) ${(100 / 6) * index}%`
      })
      return `linear-gradient(to right, ${colors.join(',')})`
    }
  },
  methods: {
    parseColorHue (val) {
      return parseInt(val.substring(val.indexOf('(') + 1, val.indexOf(',')), 10)
    },
    formatColorHue (val) {
      return `hsl(${val}, 50%, 50%)`
    }
  }
}
</script>

<style lang="less" scoped>
.custom-tip {
  position: absolute;
  top: -24px;
  width: 24px;
  height: 24px;
  margin-left: -12px;
  text-align: center;
  border: 1px solid #fff;
  font-size: 12px;
}

section {
  margin-top: 1em;
  background-color: #fafafa;
  padding: 0.5em 1em;
  border-radius: 4px;
  font-size: 12px;
}
</style>

API

Props

Name Type Default Description

ui

string=

Style variants.

Value	Description
`s`	Small.
`m`	Medium.

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

Edit this page on GitHubEdit