Sometimes, you need a slider on your website, for the user to interact with volume for example.

Sliders have become a normal way to manage different parameters on websites, so normal actually that it became quite boring. Moving a cursor from right to left is a bit repetitive isn't it?

Introducing the complex slider, the only slider that can provide your sound system with very useful complex values such as -4 + -63i percents of volume. Who's bored now?

To use this on your website, simply :

1. Download the script complex-slider.js and the styles complex-slider.css.
2. Import the styles file on the HTML page you want to use complex sliders on.
3. Insert the HTML and JavaScript snippets you'll find below.
4. And Voilà! Your website is ready to handle complex volume values.

Use this code snippet wherever you want to insert a complex slider on your page.

<div class="complex-slider">
    <div class="complex-slider-text">
        47%
    </div>
    <div class="complex-slider-row">
        <svg class="complex-slider-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" width="24" height="24">
            <path stroke-linecap="round" stroke-linejoin="round" d="M19.114 5.636a9 9 0 010 12.728M16.463 8.288a5.25 5.25 0 010 7.424M6.75 8.25l4.72-4.72a.75.75 0 011.28.53v15.88a.75.75 0 01-1.28.53l-4.72-4.72H4.51c-.88 0-1.704-.507-1.938-1.354A9.01 9.01 0 012.25 12c0-.83.112-1.633.322-2.396C2.806 8.756 3.63 8.25 4.51 8.25H6.75z" />
        </svg>
        <div class="complex-slider-line"></div>
        <div class="complex-slider-circle"></div>
    </div>
</div>

Copy this script tag at the end of the body of the page. Change the path to the complex-slider.js module if necessary.

<script type="module" src="complex-slider.js"></script>
<script type="module">
    import ComplexSlidersManager from "./complex-slider.js";

    ComplexSlidersManager.init();
</script>

As you can guess, this is the future. Simple sliders will soon vanish from the surface of the Internet, as we'll use complex sliders only. Just look at the practical benefits it gives us.

Therefore, all contribution would be greatly appreciated, such as :

• Writing some code and opening pull-requests. Feel free to do so, I'll gladly review and approve them.
• Reporting bugs or sharing ideas about the complex slider, because remember, this is the future, and we need to make it bug-free and implement as many useful features as possible.

The icon of speaker was provided by heroicons.

Colors have been picked from Tailwind CSS palette.

The demo GIF has been made using the very nice to use ScreenToGif.

The idea of creating this script came when watching this YouTube Short.

This script follow the semantic versioning principles.

The code found on this repository is provided under GPL v3, please read the LICENSE document for more information.