Slider

Examples

Size variants

Available size variants in 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

Set the readonly prop to make the slider read-only, and set the disabled prop to disable the slider.

Edit this demo 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>

Step size

Use the step prop to specify the step size. This adjusts the input value according to the specified step value when you click the adjustment buttons or press ← and → keys.

After setting the step prop, you can display the scale marks by setting the mark prop.

Edit this demo 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 drag range.

Edit this demo 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 progress

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

Edit this demo 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>

Vertical

Use the vertical prop to specify whether to use the vertical style.

After setting the step prop, you can display the scale marks by setting the mark prop.

Edit this demo on GitHubEdit

<template>
<article>
  <veui-slider
    v-model="value"
    :min="0"
    :max="100"
    vertical
    style="height: 180px"
  />
</article>
</template>

<script>
import { Slider } from 'veui'

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

Custom content

Use the thumb / tip slots to customize the slider button, hover tips, and other content.

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

Edit this demo 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

Predefined styles.

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

value

*|Array<*>

Value.

The default value type is number, and the value size range after the parse function processing should be between min and max. When the value is in the form of Array<number>, the component renders multiple sliders corresponding to each value.

When parse and format are provided, the value can be of any type, but parse needs to parse the incoming value into a number type and return it; format needs to format the output value into its original form. The implementation of parse and format only needs to process a single value, and the component will call these two functions for each item of multiple values.

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

min number 0 The minimum value allowed after the parse function processes the value.

max number 1 The maximum value allowed after the parse function processes the value.

step number 0 The step value after the parse function processes the value.

mark boolean false Whether to display step marks.

vertical boolean false Whether to display vertically.

parse function val => val Value processing function.

format function val => val Output value processing function.

Slots

Name Description

track Slider track. Default content: a line.

tip-label Floating prompt text. Default content: the current value.

thumb

Slider thumb.

Default content: a round button.

Name	Type	Description
`index`	`number`	Slider index.
`focus`	`boolean`	Whether the slider is focused.
`hover`	`boolean`	Whether the mouse is hovering.
`dragging`	`boolean`	Whether the slider is being dragged.

tip

Popup tooltip.

Default content: a Tooltip component with the content being value.

Name	Type	Description
`target`	`HTMLElement`	Slider element.
`open`	`boolean`	Whether there is an active slider.
`active-index`	`boolean`	The index of the active slider.

Events

Name	Description
`input`	`v-model` Triggered after modification, with the callback parameter `(value: *)`. `value` is the new value processed by the `format` function after the change.

Edit this page on GitHubEdit