l-morphic-slider

🎛️ Slider Features

• Magnetic Deformation: Track bends towards cursor for visual feedback
• Particle Trail: Thumb leaves glowing particles behind
• Glow Effects: Configurable intensity for luminous effects
• Multiple Orientations: Horizontal and vertical with same API
• Keyboard Support: Arrow keys, Home, End for navigation
• Touch Support: Optimized for mobile devices

📝 Usage in Code

<l-morphic-slider 
    value="50"
    min="0"
    max="100"
    step="5"
    color="#00ffff"
    label="Volume"
    orientation="horizontal"
    track-deform="true"
    trail-enabled="true"
    magnetic-strength="0.4"
    glow-intensity="1.2">
</l-morphic-slider>

<script>
const slider = document.querySelector('l-morphic-slider');

// API Methods
slider.setValue(75);
slider.getValue(); // returns current value
slider.disable();
slider.enable();
slider.reset(); // set to middle

// Event Listeners
slider.addEventListener('change', e => {
    console.log('Value:', e.detail.value);
});

slider.addEventListener('slide-start', e => {
    console.log('Drag started');
});

slider.addEventListener('slide-end', e => {
    console.log('Drag ended');
});
</script>

⚙️ Available Attributes