Slider 滑块

引入

import { Slider } from '@didi/mand-mobile'
Vue.component(Slider.name, Slider)

代码演示

基本

        <template>
  <div class="md-example-child md-example-child-slider">
    <md-slider v-model="quantity"></md-slider>
    </div>
</template>
<script>
import {Slider} from 'mand-mobile'
export default {
  name: 'slider-demo',
  components: {
    [Slider.name]: Slider,
  },
  data() {
    return {
      quantity: 25,
    }
  },
}
</script>
 
      

格式化

        <template>
  <div class="md-example-child md-example-child-slider">
    <md-slider v-model="quantity" :format="format"></md-slider>
    </div>
</template>
<script>
import {Slider} from 'mand-mobile'
export default {
  name: 'slider-demo',
  components: {
    [Slider.name]: Slider,
  },
  data() {
    return {
      quantity: 50,
    }
  },
  methods: {
    format(val) {
      return '￥' + val
    },
  },
}
</script>
 
      

步长

        <template>
  <div class="md-example-child md-example-child-slider">
    <md-slider v-model="bucket" :step="10"></md-slider>
    </div>
</template>

<script>
import {Slider} from 'mand-mobile'

export default {
  name: 'slider-demo',
  components: {
    [Slider.name]: Slider,
  },
  data() {
    return {
      bucket: 10,
    }
  },
}

</script>

      

禁用

        <template>
  <div class="md-example-child md-example-child-slider">
    <md-slider v-model="quantity" disabled></md-slider>
    </div>
</template>

<script>
import {Slider} from 'mand-mobile'

export default {
  name: 'slider-demo',
  components: {
    [Slider.name]: Slider,
  },
  data() {
    return {
      quantity: 50,
    }
  },
}

</script>

      

范围

        <template>
  <div class="md-example-child md-example-child-slider">
    <md-slider v-model="range" range></md-slider>
    </div>
</template>

<script>
import {Slider} from 'mand-mobile'

export default {
  name: 'slider-demo',
  components: {
    [Slider.name]: Slider,
  },
  data() {
    return {
      range: [25, 50],
    }
  },
}

</script>


      

边界值

        <template>
  <div class="md-example-child md-example-child-slider">
    <md-slider v-model="range" :min="15" :max="80" range></md-slider>
    </div>
</template>

<script>
import {Slider} from 'mand-mobile'

export default {
  name: 'slider-demo',
  components: {
    [Slider.name]: Slider,
  },
  data() {
    return {
      range: [25, 50],
    }
  },
}

</script>

      

API

Slider Props