Vue Range Component - Bitrix24 UI

Usage

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

modelValue

<script setup lang="ts">
const value = ref(50)
</script>

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

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

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

Min / Max

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

min

max

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

Step

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

step

<template>
  <B24Range :step="10" :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.

<script setup lang="ts">
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.

minStepsBetweenThumbs

<script setup lang="ts">
const value = ref([
  25,
  50,
  75
])
</script>

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

Orientation

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

orientation

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

Color

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

color

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

Size

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

size

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

Use the tooltip prop to display a Tooltip around the Range thumbs with the current value. You can set it to true for default behavior or pass an object to customize it with any property from the Tooltip component.

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

Disabled

Use the disabled prop to disable the Range.

disabled

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

Inverted

Use the inverted prop to visually invert the Range.

inverted

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

API

Props

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

Emits

Event	Type
`change`	`[event: Event]`
`update:modelValue`	`[value: T \| undefined]`

Theme

app.config.ts

export default defineAppConfig({
  b24ui: {
    range: {
      slots: {
        root: 'relative flex items-center select-none touch-none',
        track: 'relative rounded-(--ui-border-radius-pill) bg-(--ui-color-base-5) grow overflow-hidden',
        range: 'absolute rounded-(--ui-border-radius-pill) bg-(--b24ui-background)',
        thumb: 'rounded-(--ui-border-radius-pill) bg-(--ui-color-base-white-fixed) ring-2 outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 ring-(--b24ui-background) focus-visible:outline-(--b24ui-background-hover)'
      },
      variants: {
        color: {
          'air-primary': {
            root: 'style-filled'
          },
          'air-primary-success': {
            root: 'style-filled-success'
          },
          'air-primary-alert': {
            root: 'style-filled-alert'
          },
          'air-primary-copilot': {
            root: 'style-filled-copilot'
          },
          'air-primary-warning': {
            root: 'style-filled-warning'
          },
          default: {
            root: 'style-old-default'
          },
          danger: {
            root: 'style-old-danger'
          },
          success: {
            root: 'style-old-success'
          },
          warning: {
            root: 'style-old-warning'
          },
          primary: {
            root: 'style-old-primary'
          },
          secondary: {
            root: 'style-old-secondary'
          },
          collab: {
            root: 'style-old-collab'
          },
          ai: {
            root: 'style-old-ai'
          }
        },
        size: {
          xs: {
            thumb: 'size-[12px]'
          },
          sm: {
            thumb: 'size-[14px]'
          },
          md: {
            thumb: 'size-[16px]'
          },
          lg: {
            thumb: 'size-[20px]'
          }
        },
        orientation: {
          horizontal: {
            root: 'w-full',
            range: 'h-full'
          },
          vertical: {
            root: 'flex-col h-full',
            range: 'w-full'
          }
        },
        disabled: {
          true: {
            root: 'opacity-30 cursor-not-allowed'
          }
        }
      },
      compoundVariants: [
        {
          orientation: 'horizontal',
          size: 'xs',
          class: {
            track: 'h-[6px]'
          }
        },
        {
          orientation: 'horizontal',
          size: 'sm',
          class: {
            track: 'h-[7px]'
          }
        },
        {
          orientation: 'horizontal',
          size: 'md',
          class: {
            track: 'h-[8px]'
          }
        },
        {
          orientation: 'horizontal',
          size: 'lg',
          class: {
            track: 'h-[9px]'
          }
        },
        {
          orientation: 'horizontal',
          size: 'xl',
          class: {
            track: 'h-[10px]'
          }
        },
        {
          orientation: 'vertical',
          size: 'xs',
          class: {
            track: 'w-[6px]'
          }
        },
        {
          orientation: 'vertical',
          size: 'sm',
          class: {
            track: 'w-[7px]'
          }
        },
        {
          orientation: 'vertical',
          size: 'md',
          class: {
            track: 'w-[8px]'
          }
        },
        {
          orientation: 'vertical',
          size: 'lg',
          class: {
            track: 'w-[9px]'
          }
        },
        {
          orientation: 'vertical',
          size: 'xl',
          class: {
            track: 'w-[10px]'
          }
        }
      ],
      defaultVariants: {
        color: 'air-primary',
        size: 'md'
      }
    }
  }
})

vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import bitrix24UIPluginVite from '@bitrix24/b24ui-nuxt/vite'

export default defineConfig({
  plugins: [
    vue(),
    bitrix24UIPluginVite({
      b24ui: {
        range: {
          slots: {
            root: 'relative flex items-center select-none touch-none',
            track: 'relative rounded-(--ui-border-radius-pill) bg-(--ui-color-base-5) grow overflow-hidden',
            range: 'absolute rounded-(--ui-border-radius-pill) bg-(--b24ui-background)',
            thumb: 'rounded-(--ui-border-radius-pill) bg-(--ui-color-base-white-fixed) ring-2 outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 ring-(--b24ui-background) focus-visible:outline-(--b24ui-background-hover)'
          },
          variants: {
            color: {
              'air-primary': {
                root: 'style-filled'
              },
              'air-primary-success': {
                root: 'style-filled-success'
              },
              'air-primary-alert': {
                root: 'style-filled-alert'
              },
              'air-primary-copilot': {
                root: 'style-filled-copilot'
              },
              'air-primary-warning': {
                root: 'style-filled-warning'
              },
              default: {
                root: 'style-old-default'
              },
              danger: {
                root: 'style-old-danger'
              },
              success: {
                root: 'style-old-success'
              },
              warning: {
                root: 'style-old-warning'
              },
              primary: {
                root: 'style-old-primary'
              },
              secondary: {
                root: 'style-old-secondary'
              },
              collab: {
                root: 'style-old-collab'
              },
              ai: {
                root: 'style-old-ai'
              }
            },
            size: {
              xs: {
                thumb: 'size-[12px]'
              },
              sm: {
                thumb: 'size-[14px]'
              },
              md: {
                thumb: 'size-[16px]'
              },
              lg: {
                thumb: 'size-[20px]'
              }
            },
            orientation: {
              horizontal: {
                root: 'w-full',
                range: 'h-full'
              },
              vertical: {
                root: 'flex-col h-full',
                range: 'w-full'
              }
            },
            disabled: {
              true: {
                root: 'opacity-30 cursor-not-allowed'
              }
            }
          },
          compoundVariants: [
            {
              orientation: 'horizontal',
              size: 'xs',
              class: {
                track: 'h-[6px]'
              }
            },
            {
              orientation: 'horizontal',
              size: 'sm',
              class: {
                track: 'h-[7px]'
              }
            },
            {
              orientation: 'horizontal',
              size: 'md',
              class: {
                track: 'h-[8px]'
              }
            },
            {
              orientation: 'horizontal',
              size: 'lg',
              class: {
                track: 'h-[9px]'
              }
            },
            {
              orientation: 'horizontal',
              size: 'xl',
              class: {
                track: 'h-[10px]'
              }
            },
            {
              orientation: 'vertical',
              size: 'xs',
              class: {
                track: 'w-[6px]'
              }
            },
            {
              orientation: 'vertical',
              size: 'sm',
              class: {
                track: 'w-[7px]'
              }
            },
            {
              orientation: 'vertical',
              size: 'md',
              class: {
                track: 'w-[8px]'
              }
            },
            {
              orientation: 'vertical',
              size: 'lg',
              class: {
                track: 'w-[9px]'
              }
            },
            {
              orientation: 'vertical',
              size: 'xl',
              class: {
                track: 'w-[10px]'
              }
            }
          ],
          defaultVariants: {
            color: 'air-primary',
            size: 'md'
          }
        }
      }
    })
  ]
})

RadioGroup

A collection of radio buttons to pick a single choice from several options.

Select

A selection field to pick from various options.