wxc-slider-bar

A slider component for displaying current value and intervals in range.

!> These rich interaction components are based on BindingX feature. Make sure your app install it.

Rule

To input a value in a range.

Demo

Code Example

<template>
  <wxc-slider-bar v-bind="sliderBarCfg"></wxc-slider-bar>
</template>
<script>
  import { WxcSliderBar } from 'weex-ui';
  export default {
  	components: { WxcSliderBar },
  	data: () => ({
      sliderBarCfg: {
        length: 400,
        range: false,
        min: 0,
        max: 100,
        value: 50,
        defaultValue: 50,
        disabled: false
      }
  	})
  }
</script>

More details can be found in here

API

Prop	Type	Required	Default	Description
length	`Number`	`N`	`500`	bar width
height	`Number`	`N`	`4`	bar height
range	`Boolean`	`N`	`false`	dual thumb mode
min	`Number`	`N`	`0`	the minimum value the slider can slide to.
max	`Number`	`N`	`100`	the maximum value the slider can slide to
minDiff	`Number`	`N`	`5`	the granularity the slider can step through values.
value	`[Number, Array]`	`N`	`0`	the value of slider
defaultValue	`[Number, Array]`	`N`	`0`	default value
disabled	`Boolean`	`N`	`false`	if true, the slider will not be interactable.
invalidColor	`String`	`N`	`#E0E0E0`	invalid color
validColor	`String`	`N`	`#EE9900`	valid color
disabledColor	`String`	`N`	`#AAA`	disabled color
selectRange	`Array`	`N`	`[0, 0]`	return value
blockColor	`String`	`N`	`#FFFFFF`	block color

Event

@updateValue="updateValue"
@wxcSliderBarTouchEnd="wxcSliderBarTouchEnd"