VEUI

VEUI on GitHub
中文

Slider

Demos

Size variants

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

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

Steps

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

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

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 bar

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>

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

NameTypeDefaultDescription
uistring=-

Style variants.

ValueDescription
sSmall.
mMedium.
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.

secondary-progressnumber | Array<number>0Secondary progress value.
minnumber0The minimun value after value is processed by the parse function.
maxnumber1The maximum value after value is processed by the parse function.
stepnumber0The step value after value is processed by the parse function.
markbooleanfalseWhether to display step marks.
parsefunctionval => valThe parse function to transform input value.
formatfunctionval => valThe format function to transform output value.

Slots

NameDescription
trackThe track of the slider. Displays a bar by default.
tip-labelThe tooltip content. Displays the current value or its item by default.
thumb

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

NameTypeDescription
indexnumberThe index of current thumb.
focusbooleanWhether current thumb is focused.
hoverbooleanWhether user is pointing current thumb.
draggingbooleanWhether the current thumb is being dragged.
tip

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

NameTypeDescription
targetHTMLElementThe rendered Element for current thumb.
openbooleanWhether there is any active thumb.
active-indexbooleanThe index of the current active thumb.

Events

NameDescription
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
© Baidu, Inc. 2023