RangeSlider

rangeslider-1779354187761.tsx

'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 [minValue, setMinValue] = useState(defaultValue[0]);
  const [maxValue, setMaxValue] = useState(defaultValue[1]);

  const handleMinChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setMinValue(parseInt(e.target.value));
  };

  const handleMaxChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setMaxValue(parseInt(e.target.value));
  };

  return (
    <div className="flex flex-col items-center justify-center h-full w-full p-4 bg-zinc-950">
      <div className="flex justify-center mb-4">
        <span className="text-sm text-zinc-400">{`$${minValue}`}</span>
        <span className="text-sm text-zinc-400 mx-4">{`$${maxValue}`}</span>
      </div>
      <div className="relative w-full h-2 mb-4 bg-zinc-800 rounded-full">
        <div
          className="absolute h-2 bg-gold rounded-full"
          style={{
            left: `${((minValue - min) / (max - min)) * 100}%`,
            width: `${((maxValue - minValue) / (max - min)) * 100}%`,
          }}
        />
        <input
          type="range"
          min={min}
          max={max}
          value={minValue}
          onChange={handleMinChange}
          className="absolute h-2 w-full appearance-none rounded-full bg-transparent pointer-events-none z-10"
        />
        <input
          type="range"
          min={min}
          max={max}
          value={maxValue}
          onChange={handleMaxChange}
          className="absolute h-2 w-full appearance-none rounded-full bg-transparent pointer-events-none z-10"
        />
        <div
          className="absolute h-4 w-4 bg-gold rounded-full -top-1 -left-1"
          style={{
            left: `${((minValue - min) / (max - min)) * 100}%`,
          }}
        />
        <div
          className="absolute h-4 w-4 bg-gold rounded-full -top-1 -right-1"
          style={{
            left: `${((maxValue - min) / (max - min)) * 100}%`,
          }}
        />
      </div>
    </div>
  );
};

export default RangeSlider;

Component info

CategoryInputs & Forms

Frameworkreact

TierFREE

Copies0

About

Dual-range price slider

More from Inputs & Forms

'use client';

import React, { useState } from 'react';

interface Color {
  hex: string;
}

interface Swatch {
  hex: string;
}

const ColorPicker = () => {
  const [color, setColor] = useState<Color>({ hex: '#C9A84C' });
  const [customColor, setCu

ColorPicker

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