Components
Slider
Get an input from a range of values.
Usage
Rate NuxtWind
<template>
<NXW-Slider v-model="modelValue" label="Rating" description="Rate NuxtWind" />
</template>
<script setup lang="ts">
const modelValue = ref(30)
</script>
Props
color
object
Default
{
"label": "text-black dark:text-white",
"description": "text-zinc-400",
"sliderLine": "bg-zinc-600 dark:bg-zinc-600",
"sliderThumb": "#06b6d4",
"sliderThumbDark": "#06b6d4",
"sliderThumbBorder": "#155e75",
"sliderThumbBorderDark": "#155e75"
}
description
string
Default
height
string
Default
h-0.5
label
string
Default
max
number
Default
100
min
number
Default
0
rounded
boolean
|
string
Default
rounded-lg
thumb-size
number
Default
15
width
string
Default
w-full
Slots
label (slot)
Custom label content for the slider.
Rate NuxtWind
<template>
<NXW-Slider v-model="modelValue" description="Rate NuxtWind">
<template #label> Rating </template>
</NXW-Slider>
</template>
<script setup lang="ts">
const modelValue = ref(30)
</script>
description (slot)
Custom description content for the slider.
Rate NuxtWind
<template>
<NXW-Slider v-model="modelValue" label="Rating">
<template #description> Rate NuxtWind </template>
</NXW-Slider>
</template>
<script setup lang="ts">
const modelValue = ref(30)
</script>