Slider
Basic usage
3
<script setup lang="ts">
import { NmorphSlider } from "@nmorph/nmorph-ui-kit";
const value = ref(3);
</script><template>
<div class="slider-basic-usage-overview">
<NmorphSlider :min="1" :max="22" :step="1" v-model="value" />
</div>
</template>Show-tooltip
If set to true, displays a tooltip with the current value.
<script setup lang="ts">
import { NmorphSlider } from "@nmorph/nmorph-ui-kit";
</script><template>
<div class="slider-show-tooltip-overview">
<NmorphSlider :show-tooltip="false" :model-value="50" />
</div>
</template>Disabled
Disables the slider if set to true.
<script setup lang="ts">
import { NmorphSlider } from "@nmorph/nmorph-ui-kit";
</script><template>
<div class="slider-disabled-overview">
<NmorphSlider disabled />
</div>
</template>