Range Slider

use leptos::prelude::*;

#[component]
pub fn DemoRangeSlider() -> impl IntoView {
    view! {
        <div class="w-full max-w-md p-6 bg-white rounded-lg shadow-lg">
            <h2 class="mb-4 text-2xl font-bold">Range Slider</h2>
            <div class="mb-4">
                <label for="price-range" class="block mb-2 font-bold text-gray-700">
                    Price Range
                </label>
                <input
                    type="range"
                    id="price-range"
                    class="w-full accent-indigo-600"
                    min="0"
                    max="1000"
                    value="500"
                    oninput="updatePrice(this.value)"
                />
            </div>
            <div class="flex justify-between text-gray-500">
                <span id="minPrice">$0</span>
                <span id="maxPrice">$1000</span>
            </div>
        </div>

        <script src="/components/range_slider.js" />
    }
}

use leptos::prelude::*;
use leptos_meta::Stylesheet;

#[component]
pub fn DemoRangeSliderDual() -> impl IntoView {
    view! {
        <Stylesheet href="/components/range_slider_dual.css" />
        <script src="/components/range_slider_dual.js" />

        <div class="flex items-center justify-center w-full h-[300px] bg-gray-100">
            <div class="w-[400px] bg-white p-6 rounded-lg shadow-lg">
                <h2 class="text-lg font-bold">PRICE RANGE</h2>

                <div class="relative mt-4 slider-container">

                    <input type="range" id="minRange" min="0" max="400" value="0" />
                    <input type="range" id="maxRange" min="0" max="400" value="400" />

                    <div class="relative w-full h-2 bg-gray-200 rounded-md">
                        <div
                            id="rangeTrack"
                            class="absolute h-2 rounded-md bg-gradient-to-r from-blue-900 to-blue-400"
                        ></div>
                    </div>
                </div>

                <div class="flex justify-between mt-3 text-gray-600">
                    <span>Min Price: $<span id="minValue">0</span></span>
                    <span>Max Price: $<span id="maxValue">400</span></span>
                </div>
            </div>

        </div>
    }
}