<script lang="ts" setup>
import { ref } from 'vue'

const props = defineProps<{
  value: [number, number]
  label: string
}>()

const emit = defineEmits<{
  (e: 'update:value', value: number[]): void
}>()

const range = ref<[number, number]>(props.value)

const marks = {
  0: '0',
  50: '50',
  100: '100',
}

function onChange(value: number & number[]) {
  emit('update:value', value)
}
</script>

<template>
  <div class="wrapper">
    <n-collapse :default-expanded-names="['1']" arrow-placement="right">
      <n-collapse-item :title="label" name="1">
        <n-space vertical>
          <n-slider v-model:value="range" range :marks="marks" :step="10" @update-value="onChange" />
        </n-space>
      </n-collapse-item>
    </n-collapse>
  </div>
</template>

<style lang="less" scoped>
.wrapper {
  padding: 10px;
}
::v-deep(.n-collapse-item-arrow){
  color: #999999 !important;;
}
</style>
