Ticks

The ticks component displays visual tick marks along a slider track to help users understand the scale and spacing of values. It generates both major and minor ticks based on the slider’s lower and upper bounds, placing them proportionally along the track.

0

25

50

75

100

Props

lower: number
The lowest tick value.

upper: number
The highest tick value.

Examples

Basic

A basic ticks track.

Preview

0

25

50

75

100

Code

<template>
    <div class="ticks-example">
        <FluxTicks style="width: 90%"
            :lower="0"
            :upper="100"/>
    </div>
</template>

<script
    setup
    lang="ts">
    import { FluxTicks } from '@flux-ui/components';
</script>

<style
    scoped
    lang="css">
    .ticks-example {
        height: 25px;
        display: flex;
        align-items: center;
        place-content: center;
    }
</style>