Range Slider

import { useState } from "react";
import { RangeSlider } from '@peppermint-design/devreadykit-custom';

export default function App() {
  const [range, setRange] = useState([20, 80]);

  return (
    <RangeSlider
      value={range}
      onValueChange={setRange}
      min={0}
      max={100}
    />
  );
}

import { RangeSlider } from '@peppermint-design/devreadykit-custom';

export default function PriceRange() {
  return (
    <RangeSlider 
      label="Price Range"
      min={0}
      max={1000}
      defaultValue={[100, 500]}
      formatValue={(value) => `$${value}`}
    />
  );
}

import { RangeSlider } from '@peppermint-design/devreadykit-custom';

export default function CustomRanges() {
  return (
    <div className="space-y-4">
      <RangeSlider 
        label="Temperature Range"
        min={-20}
        max={50}
        defaultValue={[10, 30]}
        step={5}
        formatValue={(value) => `${value}°C`}
      />

      <RangeSlider 
        label="Age Range"
        min={18}
        max={100}
        defaultValue={[25, 65]}
        step={1}
        formatValue={(value) => `${value} years`}
      />
    </div>
  );
}

import { RangeSlider } from '@peppermint-design/devreadykit-custom';

export default function VolumeRange() {
  return (
    <RangeSlider 
      label="Volume Range"
      min={0}
      max={100}
      showValue={false}
    />
  );
}

import { RangeSlider } from '@peppermint-design/devreadykit-custom';

export default function DisabledRange() {
  return (
    <RangeSlider 
      label="Disabled Range"
      min={0}
      max={100}
      defaultValue={[30, 70]}
      disabled
    />
  );
}

import { useState } from "react";
import { RangeSlider } from '@peppermint-design/devreadykit-custom';

function PriceFilter({ onRangeChange }: { onRangeChange: (range: [number, number]) => void }) {
  const [priceRange, setPriceRange] = useState<[number, number]>([50, 500]);

  return (
    <div className="space-y-4">
      <RangeSlider
        label="Price Range"
        value={priceRange}
        onValueChange={(range) => {
          setPriceRange(range);
          onRangeChange(range);
        }}
        min={0}
        max={1000}
        step={10}
        formatValue={(value) => `$${value}`}
      />
      
      <div className="flex justify-between text-sm text-gray-600">
        <span>Min: ${priceRange[0]}</span>
        <span>Max: ${priceRange[1]}</span>
      </div>
    </div>
  );
}

export default PriceFilter;

import { useState } from "react";
import { RangeSlider } from '@peppermint-design/devreadykit-custom';

function DateRangePicker() {
  const [yearRange, setYearRange] = useState<[number, number]>([2020, 2024]);
  
  const formatYear = (year: number) => `${year}`;

  return (
    <div className="space-y-4">
      <RangeSlider
        label="Year Range"
        value={yearRange}
        onValueChange={setYearRange}
        min={1990}
        max={2030}
        step={1}
        formatValue={formatYear}
      />
      
      <div className="text-center">
        <span className="text-lg font-medium">
          {yearRange[0]} - {yearRange[1]}
        </span>
      </div>
    </div>
  );
}

export default DateRangePicker;

import { useState } from "react";
import { RangeSlider } from '@peppermint-design/devreadykit-custom';

function ProductFilter() {
  const [filters, setFilters] = useState({
    priceRange: [100, 800],
    ratingRange: [3, 5],
    weightRange: [0.5, 5.0]
  });

  return (
    <div className="space-y-6">
      <RangeSlider
        label="Price Range"
        value={filters.priceRange}
        onValueChange={(range) => setFilters(prev => ({ ...prev, priceRange: range }))}
        min={0}
        max={1000}
        step={25}
        formatValue={(value) => `$${value}`}
      />
      
      <RangeSlider
        label="Rating"
        value={filters.ratingRange}
        onValueChange={(range) => setFilters(prev => ({ ...prev, ratingRange: range }))}
        min={1}
        max={5}
        step={0.1}
        formatValue={(value) => `${value.toFixed(1)}★`}
      />
      
      <RangeSlider
        label="Weight (kg)"
        value={filters.weightRange}
        onValueChange={(range) => setFilters(prev => ({ ...prev, weightRange: range }))}
        min={0}
        max={10}
        step={0.1}
        formatValue={(value) => `${value.toFixed(1)}kg`}
      />
    </div>
  );
}

export default ProductFilter;