Slider

Một input mà người dùng chọn giá trị từ trong một phạm vi cho trước.

Value: 50

Cài đặt

npm

npx @galaxy-stack/nebula-cli@latest add slider

pnpm

pnpm dlx @galaxy-stack/nebula-cli@latest add slider

yarn

yarn dlx @galaxy-stack/nebula-cli@latest add slider

bun

bunx @galaxy-stack/nebula-cli@latest add slider

Sử dụng

Vue

<script setup lang="ts">
import { Slider } from '@/components/ui'
import { ref } from 'vue'

const value = ref([50])
</script>

<template>
  <Slider v-model="value" :max="100" :step="1" class="w-[60%]" />
</template>

React

import { Slider } from '@/components/ui'

export default function SliderDemo() {
  return <Slider defaultValue={[50]} max={100} step={1} className="w-[60%]" />
}

Angular

import { Component } from '@angular/core';
import { SliderComponent } from '@/components/ui';

@Component({
  selector: 'app-slider-demo',
  standalone: true,
  imports: [SliderComponent],
  template: `
    <ui-slider
      [value]="value"
      (valueChange)="value = $event"
      [min]="0"
      [max]="100"
      [step]="1"
      class="w-[60%]"
    />
  `
})
export class SliderDemoComponent {
  value = 50;
}

Khả năng truy cập

• Điều hướng bàn phím: [TODO]
• Đọc màn hình: [TODO]
• Quản lý focus: [TODO]
• Tuân thủ WCAG: Tuân thủ WCAG 2.1 cấp độ AA

Tác giả

Bùi Trọng Hiếu (kevinbui)

• GitHub: @buikevin
• Email: kevinbui210191@gmail.com

Giấy phép

MIT © 2025 Bùi Trọng Hiếu (kevinbui)