Baidu DLS

返回 DLS

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.

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

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

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

<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%)"
<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;
}
</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.

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