RangeMeasure

The RangeMeasure component is unique to DaisyUI Kit. Use it to show tick marks above or below a Range component.

Code Example

<div class="flex-col w-full">
  <Range v-model="value" xs />
  <RangeMeasure xs />
</div>

<div class="flex-col w-full">
  <Range v-model="value" min="10" max="40" />
  <RangeMeasure min="10" max="40" />
</div>

<div class="flex-col w-full">
  <Range v-model="value" min="0" max="10" step="1" />
  <RangeMeasure min="0" max="10" numbered primary />
</div>

Components

RangeMeasure is a standalone component that pairs well with Range.

RangeMeasure

RangeMeasure accepts the same props as Range and calculates the correct number tick marks.

Prop	Type	Description
`model-value`	string	Controls the selected state. Use with `v-model`
`min`	number	Sets the minimum value.
`max`	number	Sets the maximum value.
`step`	number	Sets the step interval.
`disabled`	boolean	disables the component
`color`	string	Sets the color to one of the below prop names.
neutral	boolean	Sets the color to neutral.
primary	boolean	Sets the color to primary.
secondary	boolean	Sets the color to secondary.
accent	boolean	Sets the color to accent.
info	boolean	Sets the color to info.
success	boolean	Sets the color to success.
warning	boolean	Sets the color to warning.
error	boolean	Sets the color to error.
`size`	string	Sets the size. Can be set to one of the below size prop names.
`lg`	boolean	Sets the size to `lg`
`md`	boolean	Sets the size to `md` (the default)
`sm`	boolean	Sets the size to `sm`
`xs`	boolean	Sets the size to `xs`

Min, Max, Step

The following example starts at 10, ends at 20, and has a step interval of 2.

Selected Value

Code Example

<script setup lang="ts">
import { ref } from 'vue'

const value = ref(10)
</script>

<template>
  <Flex col class="w-full">
    <Range v-model="value" min="10" max="20" step="2" />
    <RangeMeasure v-model="value" min="10" max="20" step="2" />
  </Flex>
</template>

The numbered prop shows numbers instead of tick marks. It works well when space is not limited. When space is limited, it's best to use Range with RangeMeasure and give the RangeMeasure a larger step interval, as shown here:

Selected Value

Code Example

<script setup lang="ts">
import { ref } from 'vue'

const value = ref(10)
</script>

<template>
  <Flex col class="w-full">
    <Range v-model="value" />
    <RangeMeasure v-model="value" numbered step="10" />
  </Flex>
</template>

As Buttons

Use the as-buttons prop to make the numbers use buttons. The user will only be able to select the visible numbers. This does not prevent the Range from having a different step value, allowing the user to select values not available in the RangeMeasure.

Selected Value

Code Example

<script setup lang="ts">
import { ref } from 'vue'

const value = ref(10)
</script>

<template>
  <Flex col class="w-full">
    <Range v-model="value" />
    <RangeMeasure v-model="value" as-buttons step="10" />
  </Flex>
</template>

Disabled

Selected Value

Code Example

<script setup lang="ts">
import { ref } from 'vue'

const value = ref(10)
</script>

<template>
  <Flex col class="w-full">
    <Range v-model="value" />
    <RangeMeasure v-model="value" disabled numbered step="10" />
  </Flex>
</template>

Color

Use the color props to specify any DaisyUI background color.

Code Example

<script setup lang="ts">
import { ref } from 'vue'

const value = ref(1)
</script>

<template>
  <Flex col class="w-full">
    <Range v-model="value" max="5" primary />
    <RangeMeasure v-model="value" max="5" primary />
  </Flex>
</template>

Size

Use the size props to specify lg, md, sm, or xs.

Code Example

<script setup lang="ts">
import { ref } from 'vue'

const value = ref(1)
</script>

<template>
  <Flex col class="w-full">
    <Range v-model="value" max="5" lg />
    <RangeMeasure v-model="value" max="5" lg />
  </Flex>
</template>

You can also use the numbered prop to use numbers instead of ticks. The numbers don't always perfectly align, but it's useful for cases where they do.

Prev Range

Next Rating