滑块 Slider

通过拖动滑块在一个固定区间内进行选择

示例代码

<script setup lang="ts">
import { ref } from "vue";
import { ESStepSlider } from "earthsdk-ui";
const timeLine = [
  "1",
  "2",
  "3",
  "4",
  "5",
  "6",
  "7",
  "8",
  "9",
  "10",
  "6",
  "7",
  "8",
  "9",
  "10",
];
const a = ref(4);
const ab = (val: string, index: number) => {
  console.log(val, index);
};
</script>

<template>
  <div class="ESStepSlider">
    <ESStepSlider
      :timeLine="timeLine"
      :value="a"
      @changeValue="ab"
    ></ESStepSlider>
  </div>
</template>

<style scoped>
.ESStepSlider {
  width: 500px;
  height: 100px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
}
</style>

Attributes

属性名	说明	类型	默认值
timeLine	时间线	string[]	""
value	时间线名称下标	number	""