Range

A control for selecting a numeric value within a specified range.

Slider

Nuxt UI

Git

Usage

Use the v-model directive to control the value of the Range.

Use the default-value prop to set the initial value when you do not need to control its state.

Details

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

const value = ref(75)
</script>

<template>
  <B24Range
    v-model="value"
  />
  <B24Range
    :default-value="10"
  />
</template>

Min / Max

Use the min and max props to set the minimum and maximum values of the Range. Defaults to 0 and 100.

Details

<script setup lang="ts">
export interface ExampleProps {
  min?: number
  max?: number
}

withDefaults(defineProps<ExampleProps>(), {
  min: 3,
  max: 50
})
</script>

<template>
  <B24Range
    :min="min"
    :max="max"
    :default-value="50"
  />
</template>

Step

Use the step prop to set the increment value of the Range. Defaults to 1.

Details

<script setup lang="ts">
export interface ExampleProps {
  step?: number
}

withDefaults(defineProps<ExampleProps>(), {
  step: 10
})
</script>

<template>
  <B24Range
    :step="step"
    :default-value="50"
  />
</template>

Multiple

Use the v-model directive or the default-value prop with an array of values to create a range Range.

Details

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

const value = ref([
  25,
  75
])
</script>

<template>
  <B24Range
    v-model="value"
  />
</template>

Use the min-steps-between-thumbs prop to limit the minimum distance between the thumbs.

Details

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

export interface ExampleProps {
  minStepsBetweenThumbs?: number
}

withDefaults(defineProps<ExampleProps>(), {
  minStepsBetweenThumbs: 10
})

const value = ref([
  25,
  36,
  75
])
</script>

<template>
  <B24Range
    v-model="value"
    :min-steps-between-thumbs="minStepsBetweenThumbs"
  />
</template>

Orientation

Use the orientation prop to change the orientation of the Range. Defaults to horizontal.

Details

<script setup lang="ts">
export interface ExampleProps {
  orientation?: any
}

withDefaults(defineProps<ExampleProps>(), {
  orientation: 'horizontal'
})
</script>

<template>
  <B24Range
    :orientation="orientation"
    :default-value="50"
    class="h-48"
  />
</template>

Color

Use the color prop to change the color of the Range.

Details

<script setup lang="ts">
import type { RangeProps } from '@bitrix24/b24ui-nuxt'

export interface ExampleProps {
  color: RangeProps['color']
}

withDefaults(defineProps<ExampleProps>(), {
  color: 'default'
})
</script>

<template>
  <B24Range
    :color="color"
    :default-value="50"
  />
</template>

Size

Use the size prop to change the size of the Range.

Details

<script setup lang="ts">
export interface ExampleProps {
  size?: any
}

withDefaults(defineProps<ExampleProps>(), {
  size: 'md'
})
</script>

<template>
  <B24Range
    :size="size"
    :default-value="50"
  />
</template>

Disabled

Use the disabled prop to disable the Range.

Details

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

const isDisabled = ref(false)

onMounted(() => {
  isDisabled.value = true
})
</script>

<template>
  <B24Range
    :disabled="isDisabled"
    :default-value="24"
  />
</template>

Inverted

Use the inverted prop to visually invert the Range.

Details

<template>
  <B24Range
    inverted
    :default-value="24"
  />
</template>

API

Props

Prop	Default	Type
as	'div'	any The element or component this component should render as.
modelValue		number | number[]
size		"lg" | "md" | "xs" | "sm"
color		"default" | "danger" | "success" | "warning" | "primary" | "secondary" | "collab" | "ai"
orientation	"horizontal"	"vertical" | "horizontal" The orientation of the Range.
defaultValue		number | number[] The value of the Range when initially rendered. Use when you do not need to control the state of the Range.
b24ui		Partial<{ root: string; track: string; range: string; thumb: string; }>
disabled		boolean When `true`, prevents the user from interacting with the slider.
step	1	number The stepping interval.
max	100	number The maximum value for the range.
name		string The name of the field. Submitted with its owning form as part of a name/value pair.
min	0	number The minimum value for the range.
inverted		boolean Whether the slider is visually inverted.
minStepsBetweenThumbs		number The minimum permitted steps between multiple thumbs.

Emits

Event	Type