Slider

<!-- Basic Slider -->
<div class="lyd-slider-container">
    <label class="lyd-slider-label">
        Label Text
        <span class="lyd-slider-value" id="value">50</span>
    </label>
    <input type="range" class="lyd-slider" id="slider" 
           min="0" max="100" value="50" step="1">
</div>

<!-- Slider with Marks -->
<div class="lyd-slider-container">
    <input type="range" class="lyd-slider" min="1" max="5" value="3">
    <div class="lyd-slider-marks">
        <span class="lyd-slider-mark">1</span>
        <span class="lyd-slider-mark">2</span>
        <span class="lyd-slider-mark">3</span>
        <span class="lyd-slider-mark">4</span>
        <span class="lyd-slider-mark">5</span>
    </div>
</div>

// Update value display
function setupSlider(sliderId, valueId, format = (v) => v) {
    const slider = document.getElementById(sliderId);
    const value = document.getElementById(valueId);
    
    slider.addEventListener('input', (e) => {
        value.textContent = format(e.target.value);
    });
}

// Range slider
function setupRangeSlider(minId, maxId, selectedId, valueId) {
    const minSlider = document.getElementById(minId);
    const maxSlider = document.getElementById(maxId);
    const selected = document.getElementById(selectedId);
    const value = document.getElementById(valueId);
    
    function updateRange() {
        const min = parseInt(minSlider.value);
        const max = parseInt(maxSlider.value);
        
        // Prevent overlap
        if (min > max) {
            if (this.id === minId) {
                maxSlider.value = min;
            } else {
                minSlider.value = max;
            }
        }
        
        // Update visual
        const percentMin = (minSlider.value / minSlider.max) * 100;
        const percentMax = (maxSlider.value / maxSlider.max) * 100;
        selected.style.left = percentMin + '%';
        selected.style.width = (percentMax - percentMin) + '%';
        
        // Update text
        value.textContent = `€${minSlider.value}k - €${maxSlider.value}k`;
    }
    
    minSlider.addEventListener('input', updateRange);
    maxSlider.addEventListener('input', updateRange);
    updateRange();
}

// Initialize
setupSlider('size-slider', 'size-value', (v) => v + ' m²');
setupSlider('bedroom-slider', 'bedroom-value');
setupRangeSlider('price-min', 'price-max', 'price-range-selected', 'price-range-value');

// components/Slider.tsx
import { InputHTMLAttributes, useState } from 'react';

interface SliderProps extends Omit, 'type'> {
  label?: string;
  showValue?: boolean;
  formatValue?: (value: number) => string;
  marks?: number[] | string[];
}

export const Slider = ({
  label,
  showValue = true,
  formatValue = (v) => String(v),
  marks,
  min = 0,
  max = 100,
  value: initialValue = 50,
  onChange,
  ...props
}: SliderProps) => {
  const [value, setValue] = useState(initialValue);
  
  const handleChange = (e: React.ChangeEvent) => {
    const newValue = Number(e.target.value);
    setValue(newValue);
    onChange?.(e);
  };
  
  return (
    <div className="lyd-slider-container">
      {label && (
        <label className="lyd-slider-label">
          {label}
          {showValue && (
            <span className="lyd-slider-value">
              {formatValue(Number(value))}
            </span>
          )}
        </label>
      )}
      <input
        type="range"
        className="lyd-slider"
        min={min}
        max={max}
        value={value}
        onChange={handleChange}
        {...props}
      />
      {marks && (
        <div className="lyd-slider-marks">
          {marks.map((mark, index) => (
            <span key={index} className="lyd-slider-mark">
              {mark}
            </span>
          ))}
        </div>
      )}
    </div>
  );
};