RangeSlider

rangeslider-1779394025970.tsx

'use client'
import { useState } from 'react'

export default function RangeSlider({ min = 0, max = 1000, defaultMin = 200, defaultMax = 800, prefix = '$' }) {
  const [range, setRange] = useState([defaultMin, defaultMax])
  const pct = (v) => ((v - min) / (max - min)) * 100
  return (
    <div style={{ padding:'10px 0' }}>
      <div style={{ display:'flex', justifyContent:'space-between', marginBottom:'16px' }}>
        <div style={{ background:'#f5f3ff', color:'#6d28d9', padding:'6px 14px', borderRadius:'8px', fontWeight:700, fontSize:'15px' }}>{prefix}{range[0]}</div>
        <div style={{ background:'#f5f3ff', color:'#6d28d9', padding:'6px 14px', borderRadius:'8px', fontWeight:700, fontSize:'15px' }}>{prefix}{range[1]}</div>
      </div>
      <div style={{ position:'relative', height:'6px', background:'#e2e8f0', borderRadius:'3px', margin:'10px 0' }}>
        <div style={{
          position:'absolute', height:'100%', background:'#6d28d9', borderRadius:'3px',
          left:pct(range[0])+'%', right:(100-pct(range[1]))+'%',
        }} />
        {[0, 1].map(idx => (
          <input key={idx} type="range" min={min} max={max} value={range[idx]}
            onChange={e => {
              const v = Number(e.target.value)
              setRange(r => idx===0 ? [Math.min(v, r[1]-1), r[1]] : [r[0], Math.max(v, r[0]+1)])
            }}
            style={{
              position:'absolute', width:'100%', height:'100%', opacity:0,
              cursor:'pointer', top:0, left:0, margin:0,
              pointerEvents:idx===0?'auto':'auto',
            }}
          />
        ))}
        {[range[0], range[1]].map((v, idx) => (
          <div key={idx} style={{
            position:'absolute', top:'50%', transform:'translate(-50%,-50%)',
            left:pct(v)+'%', width:'20px', height:'20px', borderRadius:'50%',
            background:'#fff', border:'3px solid #6d28d9', boxShadow:'0 2px 8px rgba(0,0,0,0.15)',
            pointerEvents:'none',
          }} />
        ))}
      </div>
    </div>
  )
}

Component info

CategoryInputs & Forms

Frameworkreact

TierFREE

Copies0

About

Dual-handle range slider with min/max values and formatted output

More from Inputs & Forms

'use client';

import { useState, useEffect } from 'react';

interface Tag {
  id: number;
  name: string;
}

const TagInput = () => {
  const [tags, setTags] = useState<Tag[]>([]);
  const [inputValue, setInputValue] = useState('');
  const [suggest

TagInput

Inputs & Forms

'use client';

import React, { useState } from 'react';

interface File {
  name: string;
  size: number;
  progress: number;
}

const FileUpload = () => {
  const [dragOver, setDragOver] = useState(false);
  const [files, setFiles] = useState<File[]

FileUpload

Inputs & Forms

import React, { useState } from 'react';

const OTPInput = () => {
  const [otp, setOtp] = useState(new Array(6).fill(''));
  const [activeIndex, setActiveIndex] = useState(0);

  const handleChange = (e, index) => {
    const value = e.target.value;

OTPInput

Inputs & Forms

'use client';

import React, { useState } from 'react';

interface RangeSliderProps {
  min: number;
  max: number;
  defaultValue: [number, number];
}

const RangeSlider: React.FC<RangeSliderProps> = ({ min, max, defaultValue }) => {
  const [minVal

RangeSlider

Inputs & Forms