Vue에서 사용자 지정 슬라이더 구성 요소를 만드는 방법

게시물How to Make a Custom Slider Component in Vue은 Qvault에 처음 등장했습니다.

사용자 지정 슬라이더 구성 요소를 만드는 것은 까다로울 수 있습니다. 특히 간결한 독립형 Vue 구성 요소를 만들려는 경우 더욱 그렇습니다. 이 빠른 기사에서는 Vue에서 완전히 사용자 정의 가능한 슬라이더 구성 요소를 구축하는 방법을 배웁니다. 대부분의 CSS를 자유롭게 교체하여 원하는 스타일을 얻을 수 있지만 좋은 출발점을 알려드리겠습니다.

실제로 우리가 구축할 구성 요소는 프로덕션에서 사용하는 것과 정확히 동일한 구성 요소이며 coding courses에 대한 등록 워크플로에서 실제로 작동하는 것을 볼 수 있습니다.

full demo on codesandbox here 을 볼 수 있습니다. 나와 같은 경우 쉽게 수정하고 변경할 수 없는 방대한 라이브러리를 가져오는 것보다 자신만의 가벼운 UI 구성 요소를 빌드하는 것을 선호합니다.

다른 커스텀 Vue 컴포넌트를 만드는 방법

계속 진행하기 전에 다른 사용자 지정 Vue.js 구성 요소 자습서를 찾고 있다면 여기에서 찾을 수 있습니다.

Custom select component in Vue

Custom tooltip component In Vue

Custom toggle switch component in Vue

HTML

<template>
  <div>
    <div class="slider-component">
      <div class="slidecontainer">
        <input
          ref="input"
          v-model="currentValue"
          type="range"
          :min="min"
          :max="max"
          class="slider"
          @input="onInput"
        >
      </div>
    </div>
  </div>
</template>

그렇게 나쁘지 않았어? 구성 요소를 사용하기 위해 내장v-model 속성을 사용할 수 있는 방식으로 데이터 모델을 구축하고 있습니다.

자바스크립트

export default {
  props: {
    value: {
      type: Number,
      required: true
    },
    min: {
      type: Number,
      required: true
    },
    max: {
      type: Number,
      required: true
    }
  },
  data(){
    return {
      currentValue: this.value
    };
  },
  methods: {
    onInput() {
      // this.currentValue is a string because HTML is weird
      this.$emit('input', parseInt(this.currentValue));
    }
  }
};

위에서 언급했듯이 이것은 v-model 의 사용을 설정합니다. 기본값currentValue을 this.value prop으로 설정하고 @input 후크를 사용하여 현재 값을 내보내면 좋습니다.

CSS

내 스타일링을 위해 여기에 오지 않을 수도 있지만 아마도 스타일링을 교체하기 위해 여기에 있을 것입니다. 자유롭게 내 CSS를 복사하여 자신의 스타일로 바꾸세요!

.slider-component .slidecontainer {
    width: 100%;
}

.slider-component .slidecontainer .slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 4px;
    border-radius: 2px;
    background: #c2c2c2;
    outline: none;
    opacity: 0.7;
    -webkit-transition: .2s;
    transition: opacity .2s;
}

.slider-component .slidecontainer .slider:hover {
    opacity: 1;
}

.slider-component .slidecontainer .slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    background: #D8A22E;
    cursor: pointer;
    border-radius: 50%;
}

.slider-component .slidecontainer .slider::-moz-range-thumb {
    width: 18px;
    height: 18px;
    background: #D8A22E;
    cursor: pointer;
    border-radius: 50%;
}

여기서 주목해야 할 중요한 점은 브라우저 기본값을 무시하고 모든 것을 직접 설정한다는 것입니다.

전체 구성 요소

<template>
  <div>
    <div class="slider-component">
      <div class="slidecontainer">
        <input
          ref="input"
          v-model="currentValue"
          type="range"
          :min="min"
          :max="max"
          class="slider"
          @input="onInput"
        >
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    value: {
      type: Number,
      required: true
    },
    min: {
      type: Number,
      required: true
    },
    max: {
      type: Number,
      required: true
    }
  },
  data(){
    return {
      currentValue: this.value
    };
  },
  methods: {
    onInput() {
      // this.currentValue is a string because HTML is weird
      this.$emit('input', parseInt(this.currentValue));
    }
  }
};
</script>

<style scoped>
.slider-component .slidecontainer {
    width: 100%;
}

.slider-component .slidecontainer .slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 4px;
    border-radius: 2px;
    background: #c2c2c2;
    outline: none;
    opacity: 0.7;
    -webkit-transition: .2s;
    transition: opacity .2s;
}

.slider-component .slidecontainer .slider:hover {
    opacity: 1;
}

.slider-component .slidecontainer .slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    background: #D8A22E;
    cursor: pointer;
    border-radius: 50%;
}

.slider-component .slidecontainer .slider::-moz-range-thumb {
    width: 18px;
    height: 18px;
    background: #D8A22E;
    cursor: pointer;
    border-radius: 50%;
}
</style>

읽어 주셔서 감사합니다!

테이크computer science courses on our new platform

질문이나 의견이 있으면 Twitter를 팔로우하고 연락하십시오.

Subscribe 더 많은 프로그래밍 기사를 보려면 뉴스레터로