# Slider 滑动条

<template>
  <Flex gap="16px" flow="column">
    <Slider v-model="value1"></Slider>
    <Slider v-model="value2"></Slider>
    <Slider v-model="value3" disabled></Slider>
  </Flex>
</template>

<script>
import { defineComponent, ref } from 'vue'
import { Flex, Slider } from 'comz'

export default defineComponent({
  components: {
    Flex,
    Slider
  },
  setup() {
    return {
      value1: ref(0),
      value2: ref(50),
      value3: ref(30)
    }
  }
})
</script>

<template>
  <Flex gap="16px" flow="column">
    <Flex flow="column">
      <div>value: {{ value1 }}</div>
      <Slider v-model="value1" :min="0" :max="50"></Slider>
    </Flex>
    <Flex flow="column">
      <div>value: {{ value2 }}</div>
      <Slider v-model="value2" :min="50" :max="100"></Slider>
    </Flex>
    <Flex flow="column">
      <div>value: {{ value3 }}</div>
      <Slider v-model="value3" :min="-50" :max="50"></Slider>
    </Flex>
  </Flex>
</template>

<script>
import { defineComponent, ref } from 'vue'
import { Flex, Slider } from 'comz'

export default defineComponent({
  components: {
    Flex,
    Slider
  },
  setup() {
    return {
      value1: ref(0),
      value2: ref(50),
      value3: ref(0)
    }
  }
})
</script>

<template>
  <Flex gap="16px" flow="column">
    <Flex flow="column">
      <div>value: {{ value1 }}</div>
      <Slider v-model="value1" :step="0.1" :min="0" :max="10"></Slider>
    </Flex>
    <Flex flow="column">
      <div>value: {{ value2 }}</div>
      <Slider v-model="value2" :step="30"></Slider>
    </Flex>
  </Flex>
</template>

<script>
import { defineComponent, ref } from 'vue'
import { Flex, Slider } from 'comz'

export default defineComponent({
  components: {
    Flex,
    Slider
  },
  setup() {
    return {
      value1: ref(0),
      value2: ref(0)
    }
  }
})
</script>

<template>
  <Flex gap="16px" flow="column">
    <Slider v-model="value1" :min="min" :max="max">
      <template #prepend>{{ min }}</template>
      <template #append>{{ max }}</template>
    </Slider>

    <Slider
      :modelValue="Number(value2)"
      @update:modelValue="(val) => (value2 = val)"
    >
      <template #append>
        <Input
          :modelValue="String(value2)"
          @update:modelValue="(val) => (value2 = val)"
          style="width: 50px"
        ></Input>
      </template>
    </Slider>
  </Flex>
</template>

<script>
import { defineComponent, ref } from 'vue'
import { Flex, Slider, Input } from 'comz'

export default defineComponent({
  components: {
    Flex,
    Slider,
    Input
  },
  setup() {
    return {
      min: 0,
      max: 100,
      value1: ref(0),
      value2: ref(50)
    }
  }
})
</script>