<template>
  <div class="demo-slider-basic">
    <label>今天的温度：</label>
    <ui-slider
      v-model="value"
      :use-keyboard="true"
      :width="300"
      tooltip="hover"
      formatter="{value} ℃"
      class="test-slider"></ui-slider>
    <ui-input
      v-model="value"
      size="small"
      type="text"
      min="0"
      max="100"
      class="slider-input"></ui-input>
  </div>
</template>

<script>
import { Slider, Input } from "amumu-ui"
export default {
  components: {
    "ui-slider": Slider,
    "ui-input": Input,
  },
  data() {
    return {
      value: 25,
    }
  },
}
</script>

<style lang="scss">
.demo-slider-basic {
  display: flex;
  .slider-input {
    width: 100px;
  }
}
</style>
