Lineone - From Range

Banking cards

$2,139.22

**** **** **** 8945

$2,139.22

**** **** **** 8945

$2,139.22

**** **** **** 8945

Stock Market

BTC

Bitcoin

60.33$

+3.3%

SOL

Solana

20.56$

+4.11%

Range

Forms
Range

Basic Input Range

Code

Use our custom range inputs for consistent cross-browser styling and built-in customization. Check out code for detail of usage.

                
  <label class="block">
    <input class="form-range text-slate-500 dark:text-navy-300" type="range" />
  </label>

Colored Input Range

Code

Input Range Thumb can have different colors. Check out code for detail of usage.

                
  <label class="block">
    <input
      value="50"
      class="form-range text-primary dark:text-accent"
      type="range"
    />
  </label>
  <label class="block">
    <input
      value="50"
      class="form-range text-secondary dark:text-secondary-light"
      type="range"
    />
  </label>
  <label class="block">
    <input value="50" class="form-range text-info" type="range" />
  </label>
  <label class="block">
    <input value="50" class="form-range text-success" type="range" />
  </label>
  <label class="block">
    <input value="50" class="form-range text-warning" type="range" />
  </label>
  <label class="block">
    <input value="50" class="form-range text-error" type="range" />
  </label>

Input Range Size

Code

Input Ranges can have various sizes. Check out code for detail of usage.

                
  <label class="block">
    <input
      class="form-range text-slate-500 [--range-track-h:3px] [--range-thumb-size:12px] dark:text-navy-300"
      type="range"
    />
  </label>
  <label class="block">
    <input class="form-range text-slate-500 dark:text-navy-300" type="range" />
  </label>
  <label class="block">
    <input
      class="form-range text-slate-500 [--range-track-h:8px] [--range-thumb-size:24px] dark:text-navy-300"
      type="range"
    />
  </label>

Input Range Model

Code

Model allows you to bind the value of an input element to data Check out code for detail of usage.

0 100

Value:

                
  <div x-data="{range:50}">
    <div class="flex justify-between">
      <span>0</span>
      <span>100</span>
    </div>
    <label class="block">
      <input
        x-model="range"
        class="form-range text-slate-500 dark:text-navy-300"
        type="range"
      />
    </label>
    <div class="mt-2">
      <p>Value: <span x-text="range"></span></p>
    </div>
  </div>

Profile

Messages

Team

Activity

Settings

Notifications

Banking cards

Pinned Apps

Stock Market

BTC

SOL

Latest News

Settings

Range

Basic Input Range

Colored Input Range

Input Range Size

Input Range Model