013_ slider

1. Slider slider

1.1. Drag the slider to select in a fixed range .

1.2. Slider attribute

Parameters	explain	type	Optional value	The default value is
value / v-model	Binding value	number	nothing	0
min	minimum value	number	nothing	0
max	Maximum	number	nothing	100
disabled	Whether to disable	boolean	nothing	false
step	step	number	nothing	1
show-input	Whether to display the input box , Only valid for non range selection	boolean	nothing	false
show-input-controls	With the input box displayed , Whether to display the control button of input box	boolean	nothing	true
input-size	The size of the input box	string	large / medium / small / mini	small
show-stops	Whether to show breakpoints	boolean	nothing	false
show-tooltip	Whether or not shown tooltip	boolean	nothing	true
format-tooltip	format tooltip message	function(value)	nothing	nothing
range	Whether to select for the scope	boolean	nothing	false
vertical	Vertical mode or not	boolean	nothing	false
height	Slider Height , Vertical mode is required	string	nothing	nothing
label	Screen reader tags	string	nothing	nothing
debounce	Deblurring delay on input , millisecond , Only in show-input be equal to true Effective when	number	nothing	300
tooltip-class	tooltip The custom class name of	string	nothing	nothing
marks	Mark , key The type of must be number And the value is in the closed interval [min, max] Inside , Each tag can be styled individually	object	nothing	nothing

1.3. Slider event

Event name	explain	Callback Arguments
change	Trigger when value changes ( When dragging with the mouse , Only when you release the mouse )	Changed value
input	Trigger when data changes ( When dragging with the mouse , The activity process is triggered in real time )	Changed value

2. Slider Slider example

2.1. Use the scaffold to create a new one named element-ui-slider Front end projects , At the same time to install Element plug-in unit .

2.2. To write App.vue 

<template>
  <div id="app">
    <h1> Basic usage </h1>
    <div class="block">
      <span> Default </span>
      <el-slider v-model="base_value1"></el-slider>
    </div>
    <div class="block">
      <span> Custom initial value </span>
      <el-slider v-model="base_value2"></el-slider>
    </div>
    <div class="block">
      <span> hide  Tooltip</span>
      <el-slider v-model="base_value3" :show-tooltip="false"></el-slider>
    </div>
    <div class="block">
      <span> format  Tooltip</span>
      <el-slider v-model="base_value4" :format-tooltip="formatTooltip"></el-slider>
    </div>
    <div class="block">
      <span> Ban </span>
      <el-slider v-model="base_value5" disabled></el-slider>
    </div>

    <h1> Discrete value </h1>
    <div class="block">
      <span> Don't show breakpoints </span>
      <el-slider v-model="step_value1" :step="10"></el-slider>
    </div>
    <div class="block">
      <span> Show breakpoints </span>
      <el-slider v-model="step_value2" :step="10" show-stops></el-slider>
    </div>

    <h1> With an input box </h1>
    <div class="block">
      <el-slider v-model="input_value" show-input></el-slider>
    </div>

    <h1> Range selection </h1>
    <div class="block">
      <el-slider v-model="range_value" range show-stops :max="10"></el-slider>
    </div>

    <h1> Vertical mode </h1>
    <div class="block">
      <el-slider v-model="vertical_value" vertical height="200px"></el-slider>
    </div>

    <h1> Show the logo </h1>
    <div class="block">
      <el-slider v-model="value" range :marks="marks"></el-slider>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      base_value1: 0,
      base_value2: 50,
      base_value3: 36,
      base_value4: 48,
      base_value5: 42,
      step_value1: 0,
      input_value: 0,
      range_value: [4, 8],
      vertical_value: 0,
      value: [30, 60],
      marks: {
        0: '0°C',
        8: '8°C',
        37: '37°C',
        50: {
          style: {
            color: '#1989FA'
          },
          label: this.$createElement('strong', '50%')
        }
      }
    }
  },
  methods: {
    formatTooltip (val) {
      return val / 100
    }
  }
}
</script>

<style>
  #app {
    width: 600px;
    margin: 0 0 50px 10px;
  }
</style>

2.3. Run the project