Range slider

<script setup lang="ts">
import { ref } from 'vue';
import { CfRangeSlider } from '@chufix-design/vue';
const range = ref<[number, number]>([20, 80]);
</script>

<template>
  <div class="rangeslider-demo">
    <CfRangeSlider v-model="range" :min="0" :max="100" />
    <div class="rangeslider-demo__value">
      [{{ range[0] }}, {{ range[1] }}]
    </div>
  </div>
</template>

<style scoped>
.rangeslider-demo {
  width: min(100%, 640px);
  padding: 16px 0;
}

.rangeslider-demo__value {
  margin-top: 12px;
  color: var(--fg-3);
  font-family: var(--font-mono);
  font-size: 12px;
}
</style>

<CfRangeSlider value={range} onChange={setRange} min={0} max={100} />

<script setup lang="ts">
import { ref } from 'vue';
import { CfRangeSlider } from '@chufix-design/vue';
const a = ref<[number, number]>([10, 50]);
const b = ref<[number, number]>([30, 70]);
const c = ref<[number, number]>([60, 90]);
</script>

<template>
  <div class="rangeslider-tones">
    <span class="rangeslider-tones__label">tone = success</span>
    <CfRangeSlider v-model="a" tone="success" />
    <span class="rangeslider-tones__label">tone = warning</span>
    <CfRangeSlider v-model="b" tone="warning" />
    <span class="rangeslider-tones__label">tone = error / disabled</span>
    <CfRangeSlider v-model="c" tone="error" disabled />
  </div>
</template>

<style scoped>
.rangeslider-tones {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: min(100%, 640px);
}

.rangeslider-tones__label {
  color: var(--fg-3);
  font-size: 11px;
}
</style>

<CfRangeSlider value={v} onChange={setV} tone="success" />