Qwik range - Flowbite

Get started with the range component to receive a number from the user anywhere from 1 to 100 by sliding form control horizontally based on multiple options

The range component can be used as an input field to get a number from the user based on your custom selection (ie. from 1 to 100) by using a sliding animation.

To use the range component, you need to import it from flowbite-qwik :

import { Range } from "flowbite-qwik"

Range slider example

Get started with this default example with values from 1 to 100 and the default value of 50.

Edit on GitHub
tsx
import { component$, useSignal } from '@builder.io/qwik'
import { Range } from 'flowbite-qwik'

export default component$(() => {
  const value = useSignal('50')

  return (
    <>
      <label for="default-range" class="mb-2 block text-sm font-medium text-gray-900 dark:text-white">
        Range ({value.value})
      </label>
      <Range id="default-range" bind:value={value} />
    </>
  )
})

Disabled state

Apply the disabled attribute to disallow the users from further selecting values.

Edit on GitHub
tsx
import { component$, useSignal } from '@builder.io/qwik'
import { Range } from 'flowbite-qwik'

export default component$(() => {
  const value = useSignal('50')

  return (
    <>
      <label for="default-range" class="mb-2 block text-sm font-medium text-gray-900 dark:text-white">
        Range ({value.value})
      </label>
      <Range id="default-range" disabled bind:value={value} />
    </>
  )
})

Min and max

Use the min and max attributes on the range component to set the limits of the range values.

Edit on GitHub
tsx
import { component$, useSignal } from '@builder.io/qwik'
import { Range } from 'flowbite-qwik'

export default component$(() => {
  const value = useSignal('2')

  return (
    <>
      <label for="default-range" class="mb-2 block text-sm font-medium text-gray-900 dark:text-white">
        Range ({value.value})
      </label>
      <Range id="default-range" min={0} max={10} bind:value={value} />
    </>
  )
})

Steps

Use the step attribute on the range component to set the increment with which the values will change.

Edit on GitHub
tsx
import { component$, useSignal } from '@builder.io/qwik'
import { Range } from 'flowbite-qwik'

export default component$(() => {
  const value = useSignal('2.5')

  return (
    <>
      <label for="default-range" class="mb-2 block text-sm font-medium text-gray-900 dark:text-white">
        Range ({value.value})
      </label>
      <Range id="default-range" min={0} max={5} step={0.5} bind:value={value} />
    </>
  )
})

Sizes

Apply the small, default, and large sizes for the range component by applying the size attribute

Edit on GitHub
tsx
import { component$, useSignal } from '@builder.io/qwik'
import { Range } from 'flowbite-qwik'

export default component$(() => {
  const smallValue = useSignal('5')
  const mediumValue = useSignal('75')
  const largeValue = useSignal('30')

  return (
    <>
      <label for="small-range" class="mb-2 block text-sm font-medium text-gray-900 dark:text-white">
        Small range ({smallValue.value})
      </label>
      <Range id="small-range" size="sm" bind:value={smallValue} class="mb-6" />

      <label for="medium-range" class="mb-2 block text-sm font-medium text-gray-900 dark:text-white">
        Default range ({mediumValue.value})
      </label>
      <Range id="medium-range" size="md" bind:value={mediumValue} class="mb-6" />

      <label for="large-range" class="mb-2 block text-sm font-medium text-gray-900 dark:text-white">
        Large range ({largeValue.value})
      </label>
      <Range id="large-range" size="lg" bind:value={largeValue} class="mb-6" />
    </>
  )
})

Event handler

Use the onClick$ native handler to capture an event when range slider has changed value

Edit on GitHub
tsx
import { component$, useSignal } from '@builder.io/qwik'
import { Range } from 'flowbite-qwik'

export default component$(() => {
  const value = useSignal('5')

  return (
    <>
      <label for="default-range" class="mb-2 block text-sm font-medium text-gray-900 dark:text-white">
        Range ({value.value})
      </label>
      <Range
        onChange$={() => {
          alert('changed !')
        }}
        id="default-range"
        bind:value={value}
      />
    </>
  )
})

Custom theme

Use the theme attribute to customize the range component as you want : root/input

Edit on GitHub
tsx
import { component$, useSignal } from '@builder.io/qwik'
import { Range } from 'flowbite-qwik'

export default component$(() => {
  const value = useSignal('5')

  return (
    <>
      <label for="default-range" class="mb-2 block text-sm font-medium text-gray-900 dark:text-white">
        Range ({value.value})
      </label>
      <Range id="default-range" size="lg" bind:value={value} theme={{ input: 'rounded-none bg-orange-200 dark:bg-orange-700' }} />
    </>
  )
})