> For the complete documentation index, see [llms.txt](https://docs.quantumbyte.ai/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.quantumbyte.ai/home/quantumbyte-v2.0/3.microsites-1/8.ui/4.components/32.range.md).

# Range Slider

### Range Props <a href="#range-props" id="range-props"></a>

| Name                   | Type    | Default                                                               | Description                                 |
| ---------------------- | ------- | --------------------------------------------------------------------- | ------------------------------------------- |
| colors                 | object  |                                                                       | Object with Tailwind CSS colors classes     |
| colors.thumbBgIos      | string  | 'range-thumb:bg-white'                                                |                                             |
| colors.thumbBgMaterial | string  | 'range-thumb:bg-md-light-primary dark:range-thumb:bg-md-dark-primary' |                                             |
| colors.valueBgIos      | string  | 'bg-primary'                                                          |                                             |
| colors.valueBgMaterial | string  | 'bg-md-light-primary dark:bg-md-dark-primary'                         |                                             |
| component              | string  | 'div'                                                                 | Component's HTML Element                    |
| disabled               | boolean | false                                                                 | Defines whether the range input is disabled |
| inputId                | string  |                                                                       | Range input id attribute                    |
| max                    | number  | 100                                                                   | Range max value                             |
| min                    | number  | 0                                                                     | Range min value                             |
| name                   | string  |                                                                       | Range input name                            |
| readonly               | boolean | false                                                                 | Defines whether the range input is readonly |
| step                   | number  | 1                                                                     | Range step                                  |
| value                  | any     |                                                                       | Range value                                 |

### Range Events

| Name   | Type        | Description            |
| ------ | ----------- | ---------------------- |
| blur   | function(e) | `blur` event handler   |
| change | function(e) | `change` event handler |
| focus  | function(e) | `focus` event handler  |
| input  | function(e) | `input` event handler  |

### Examples

{% tabs %}
{% tab title="Vue" %}

```typescript
<template>
  <i-page>
    <i-navbar title="Range Slider" />

    <i-block-title>Volume: {{ volume }}</i-block-title>
    <i-block-header>From 0 to 100 with step 10</i-block-header>
    <i-list strong inset-material outline-ios>
      <i-list-item inner-class="flex space-x-4 rtl:space-x-reverse">
        <template #inner>
          <span>0</span>
          <i-range
            :value="volume"
            :step="10"
            @input="(e) => (volume = parseInt(e.target.value, 10))"
          />
          <span>100</span>
        </template>
      </i-list-item>
    </i-list>

    <i-block-title>Price: ${{ price }}</i-block-title>
    <i-block-header>From 0 to 1000 with step 1</i-block-header>
    <i-list strong inset-material outline-ios>
      <i-list-item inner-class="flex space-x-4 rtl:space-x-reverse">
        <template #inner>
          <span>$0</span>
          <i-range
            :value="price"
            :step="1"
            :min="0"
            :max="1000"
            @input="(e) => (price = parseInt(e.target.value, 10))"
          />
          <span>$1000</span>
        </template>
      </i-list-item>
    </i-list>

    <i-block-title>
      Color: rgb({{ red }}, {{ green }}, {{ blue }})
    </i-block-title>
    <i-list strong inset-material outline-ios>
      <i-list-item>
        <template #inner>
          <i-range
            class="k-color-brand-red"
            :value="red"
            :step="1"
            :min="0"
            :max="255"
            @input="(e) => (red = parseInt(e.target.value, 10))"
          />
        </template>
      </i-list-item>
      <i-list-item>
        <template #inner>
          <i-range
            class="k-color-brand-green"
            :value="green"
            :step="1"
            :min="0"
            :max="255"
            @input="(e) => (green = parseInt(e.target.value, 10))"
          />
        </template>
      </i-list-item>
      <i-list-item>
        <template #inner>
          <i-range
            class="k-color-brand-blue"
            :value="blue"
            :step="1"
            :min="0"
            :max="255"
            @input="(e) => (blue = parseInt(e.target.value, 10))"
          />
        </template>
      </i-list-item>
    </i-list>
  </i-page>
</template>
<script>
  import { ref } from 'vue';
  import {
    iPage,
    iNavbar,
    iNavbarBackLink,
    iBlockTitle,
    iBlockHeader,
    iList,
    iListItem,
    iRange,
  } from 'ina-ui/vue';

  export default {
    components: {
      iPage,
      iNavbar,
      iNavbarBackLink,
      iBlockTitle,
      iBlockHeader,
      iList,
      iListItem,
      iRange,
    },
    setup() {
      const volume = ref(50);
      const price = ref(150);
      const red = ref(100);
      const green = ref(50);
      const blue = ref(75);

      return {
        volume,
        price,
        red,
        green,
        blue,
      };
    },
  };
</script>
```

{% endtab %}

{% tab title="React" %}

```js
import React, { useState } from 'react';
import {
  Page,
  Navbar,
  NavbarBackLink,
  BlockTitle,
  BlockHeader,
  List,
  ListItem,
  Range,
} from 'ina-ui/react';

export default function RangeSliderPage() {
  const [volume, setVolume] = useState(50);
  const [price, setPrice] = useState(150);
  const [red, setRed] = useState(100);
  const [green, setGreen] = useState(50);
  const [blue, setBlue] = useState(75);
  return (
    <Page>
      <Navbar
        title="Range Slider"
        />

      <BlockTitle>Volume: {volume}</BlockTitle>
      <BlockHeader>From 0 to 100 with step 10</BlockHeader>
      <List strong insetMaterial outlineIos>
        <ListItem
          innerClassName="flex space-x-4 rtl:space-x-reverse"
          innerChildren={
            <>
              <span>0</span>
              <Range
                value={volume}
                step={10}
                onChange={(e) => setVolume(e.target.value)}
              />
              <span>100</span>
            </>
          }
        />
      </List>

      <BlockTitle>Price: ${price}</BlockTitle>
      <BlockHeader>From 0 to 1000 with step 1</BlockHeader>
      <List strong insetMaterial outlineIos>
        <ListItem
          innerClassName="flex space-x-4 rtl:space-x-reverse"
          innerChildren={
            <>
              <span>$0</span>
              <Range
                value={price}
                step={1}
                min={0}
                max={1000}
                onChange={(e) => setPrice(e.target.value)}
              />
              <span>$1000</span>
            </>
          }
        />
      </List>

      <BlockTitle>
        Color: rgb({red}, {green}, {blue})
      </BlockTitle>
      <List strong insetMaterial outlineIos>
        <ListItem
          innerChildren={
            <Range
              className="k-color-brand-red"
              value={red}
              step={1}
              min={0}
              max={255}
              onChange={(e) => setRed(e.target.value)}
            />
          }
        />
        <ListItem
          innerChildren={
            <Range
              className="k-color-brand-green"
              value={green}
              step={1}
              min={0}
              max={255}
              onChange={(e) => setGreen(e.target.value)}
            />
          }
        />
        <ListItem
          innerChildren={
            <Range
              className="k-color-brand-blue"
              value={blue}
              step={1}
              min={0}
              max={255}
              onChange={(e) => setBlue(e.target.value)}
            />
          }
        />
      </List>
    </Page>
  );
}
```

{% endtab %}
{% endtabs %}