Range

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

Usage

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

modelValue

{
  "wait": "Loading client-side content..."
}

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

{
  "wait": "Loading client-side content..."
}

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

{
  "wait": "Loading client-side content..."
}

Step

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

step

{
  "wait": "Loading client-side content..."
}

Multiple

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

{
  "wait": "Loading client-side content..."
}

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

minStepsBetweenThumbs

{
  "wait": "Loading client-side content..."
}

Orientation

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

orientation

{
  "wait": "Loading client-side content..."
}

Color

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

color

{
  "wait": "Loading client-side content..."
}

Size

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

size

{
  "wait": "Loading client-side content..."
}

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.

{
  "wait": "Loading client-side content..."
}

Disabled

Use the disabled prop to disable the Range.

disabled

{
  "wait": "Loading client-side content..."
}

Inverted

Use the inverted prop to visually invert the Range.

inverted

{
  "wait": "Loading client-side content..."
}

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`		`number \| number[]`
`b24ui`		`{ root?: ClassNameValue; track?: ClassNameValue; range?: ClassNameValue; thumb?: ClassNameValue; }`

Emits

Event	Type
`change`	`[event: Event]`
`update:modelValue`	`[value: number \| number[] \| 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.