Slider 슬라이더

수치 구간 안에서 값을 고를 때 사용하는 슬라이드 입력 바예요.

출처: 문서

본문

언제 사용하나요?

사용자가 수치 구간 안에서 선택해야 할 때 사용해요.

기본 사용법

:::demo

<template>
  <d-slider :min="minValue" :max="maxValue" v-model="inputValue"></d-slider>
  <div class="flex-space-between">
    <span>{{ minValue }}</span>
    <span>{{ maxValue }}</span>
  </div>
</template>

<script>
import { defineComponent, ref } from 'vue';

export default defineComponent({
  setup() {
    const inputValue = ref(12);
    const minValue = ref(0);
    const maxValue = ref(20);
    return {
      inputValue,
      maxValue,
      minValue,
    };
  },
});
</script>

<style scoped>
.flex-space-between {
  display: flex;
  justify-content: space-between;
}
</style>

:::

Step을 지정할 수 있는 슬라이더

:::demo

<template>
  <d-slider :min="minValue" :max="maxValue" v-model="inputValue" :step="step"></d-slider>
  <div class="flex-space-between">
    <span>{{ minValue }}</span>
    <span>{{ maxValue }}</span>
  </div>
</template>
<script>
import { defineComponent, ref } from 'vue';

export default defineComponent({
  setup() {
    const inputValue = ref(8);
    const minValue = ref(0);
    const maxValue = ref(20);
    const step = ref(4);
    return {
      inputValue,
      maxValue,
      minValue,
      step,
    };
  },
});
</script>

<style scoped>
.flex-space-between {
  display: flex;
  justify-content: space-between;
}
</style>

:::

입력 박스가 붙은 슬라이더

:::demo

<template>
  <div class="flex-space-between">
    <div class="slider-wrapper">
      <d-slider :min="minValue" :max="maxValue" v-model="inputValue"></d-slider>
      <div class="flex-space-between">
        <span>{{ minValue }}</span>
        <span>{{ maxValue }}</span>
      </div>
    </div>
    <div class="snapshot-value">
      <d-input-number  v-model="inputValue" :min="0" :max="20"></d-input-number>
    </div>
  </div>

</template>
<script>
import { defineComponent, ref } from 'vue';

export default defineComponent({
  setup() {
    const inputValue = ref(10);
    const minValue = ref(0);
    const maxValue = ref(20);
    return {
      inputValue,
      maxValue,
      minValue,
    };
  },
});
</script>

<style scoped>
.flex-space-between {
  display: flex;
  justify-content: space-between;
}

.slider-wrapper {
  width: calc(100% - 100px);
}

.snapshot-value {
  width: 80px;
  margin-left: 20px;
}
</style>

:::

입력 금지 상태

:::demo

<template>
  <d-slider :min="minValue" :max="maxValue" disabled v-model="disabledValue"></d-slider>
  <div class="flex-space-between">
    <span>{{ minValue }}</span>
    <span>{{ maxValue }}</span>
  </div>
</template>
<script>
import { defineComponent, ref } from 'vue';

export default defineComponent({
  setup() {
    const disabledValue = ref(5);
    const maxValue = ref(50);
    const minValue = ref(2);
    return {
      disabledValue,
      maxValue,
      minValue,
    };
  },
});
</script>

<style scoped>
.flex-space-between {
  display: flex;
  justify-content: space-between;
}
</style>

:::

Popover 표시 내용 커스터마이즈

tipsRenderer 파라미터로 Popover 안에 표시할 내용을 직접 정해요. :::demo

<template>
  <div>
    <d-slider :min="minValue" :max="maxValue" v-model="inputValue" :tips-renderer="tipsRender"></d-slider>
    <div class="flex-space-between">
      <span>{{ minValue }}</span>
      <span>{{ maxValue }}</span>
    </div>

    <br style="margin-bottom: 20px" />

    <d-slider :min="minValue" :max="maxValue" v-model="inputValue" :tips-renderer="null"></d-slider>
    <div class="flex-space-between">
      <span>{{ minValue }}</span>
      <span>{{ maxValue }}</span>
    </div>
  </div>
</template>

<script>
import { defineComponent, ref } from 'vue';

export default defineComponent({
  setup() {
    const inputValue = ref(5);
    const maxValue = ref(50);
    const minValue = ref(2);
    const tipsRender = (val) => `${val} apples`;
    return {
      inputValue,
      maxValue,
      minValue,
      tipsRender,
    };
  },
});
</script>

<style scoped>
.flex-space-between {
  display: flex;
  justify-content: space-between;
}
</style>

:::

Slider 파라미터

더 알아보기 (Learn more)

d-slider는 단독으로도 쓸 수 있지만 d-input-number와 v-model을 공유해 붙이면 정밀 입력과 빠른 조작을 동시에 잡을 수 있어요. 간격이 불규칙한 값 목록이라면 step이 (max-min)을 나누어떨어지게 만드는 점만 기억하세요.