Range Slider

Range Props

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

Vue

<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>

React

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>
  );
}