README.md

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"