Smoke Slider

index.html

<div class="slider">
    <input type="range" min="1" max="100" value="50">
</div>

<!-- twitter / dribbble -->
<a class="dribbble" href="https://dribbble.com/shots/8424211-Smoke-Slider" target="_blank"><img src="https://dribbble.com/assets/logo-small-2x-9fe74d2ad7b25fba0f50168523c15fda4c35534f9ea0b1011179275383035439.png" alt=""></a>
<a class="twitter" target="_blank" href="https://twitter.com/aaroniker_me"><svg xmlns="http://www.w3.org/2000/svg" width="72" height="72" viewBox="0 0 72 72"><path d="M67.812 16.141a26.246 26.246 0 0 1-7.519 2.06 13.134 13.134 0 0 0 5.756-7.244 26.127 26.127 0 0 1-8.313 3.176A13.075 13.075 0 0 0 48.182 10c-7.229 0-13.092 5.861-13.092 13.093 0 1.026.118 2.021.338 2.981-10.885-.548-20.528-5.757-26.987-13.679a13.048 13.048 0 0 0-1.771 6.581c0 4.542 2.312 8.551 5.824 10.898a13.048 13.048 0 0 1-5.93-1.638c-.002.055-.002.11-.002.162 0 6.345 4.513 11.638 10.504 12.84a13.177 13.177 0 0 1-3.449.457c-.846 0-1.667-.078-2.465-.231 1.667 5.2 6.499 8.986 12.23 9.09a26.276 26.276 0 0 1-16.26 5.606A26.21 26.21 0 0 1 4 55.976a37.036 37.036 0 0 0 20.067 5.882c24.083 0 37.251-19.949 37.251-37.249 0-.566-.014-1.134-.039-1.694a26.597 26.597 0 0 0 6.533-6.774z"></path></svg></a>

script.js

const $ = (s, o = document) => o.querySelector(s);

var interval;

let slider = $('.slider'),
    input = $('input', slider),
    random = (min, max) => min + Math.random() * (max - min),
    between = (min, max, percent) =>  max - (max - min) * (1 - percent),
    create = slider => {

        let percent = slider.handle.dataset.percent,
            position = slider.handle.dataset.position,
            div = document.createElement('div');

        div.classList.add('smoke');
        slider.range.appendChild(div);

        gsap.set(div, {
            x: position,
            y: -20
        });

        gsap.timeline().to(div, {
            scale: random(between(.15, 1, percent), between(.4, 2, percent)),
            duration: between(.8, 1.2, percent)
        }).to(div, {
            scale: 0,
            duration: between(.3, .5, percent)
        });

        gsap.to(div, {
            duration: between(.3, .4, percent),
            opacity: 1
        });

        gsap.to(div, {
            duration: between(2, 3, percent),
            y: random(between(-40, -200, percent), between(-70, -320, percent)),
            x: random(between(-20, -90, percent), between(20, 90, percent)) + parseInt(position),
            onComplete() {
                div.remove();
            }
        });

    };

rangesliderJs.create(input, {
    onInit(value) {
        this.handle.dataset.value = value;
    },
    onSlideStart(value, percent, position) {
        this.handle.classList.add('active');
        interval = setInterval(() => {
            create(this);
        }, 50);
    },
    onSlide(value, percent, position) {
        this.handle.dataset.value = value;
        this.handle.dataset.percent = percent;
        this.handle.dataset.position = position;
    },
    onSlideEnd() {
        this.handle.classList.remove('active');
        clearInterval(interval);
    }
});

scripts

<script src="https://cdn.jsdelivr.net/npm/rangeslider-js@3.2.5/dist/rangeslider-js.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/gsap-latest-beta.min.js"></script>

smoke-slider.markdown

Smoke Slider

From https://dribbble.com/shots/8044038-After-Effects-Smoke-Intensive

A Pen by Aaron Iker on CodePen.

License.

style.scss

.slider {
    --line-background: #{rgba(#fff, .6)};
    --line-active: #fff;
    --handle-background: #275EFE;
    --handle-border: #fff;
    --handle-text-color: #fff;
    --smoke-background: #fff;
    --smoke-shadow: inset 3px 3px 0 0 #E1E6F9;
    max-width: 320px;
    width: 100%;
    .rangeslider {
        width: 100%;
        height: 3px;
        position: relative;
        .rangeslider__fill__bg,
        .rangeslider__fill {
            --b: var(--line-active);
            position: absolute;
            left: 0;
            z-index: 1;
            top: var(--t, 0);
            height: var(--h, 3px);
            background: var(--b);
            border-radius: 2px;
        }
        .rangeslider__fill__bg {
            --t: 1px;
            --h: 1px;
            --b: var(--line-background);
            width: 100%;
        }
        .rangeslider__handle {
            width: 33px;
            height: 33px;
            left: 0;
            top: 2px;
            z-index: 2;
            position: absolute;
            cursor: pointer;
            &:before {
                content: attr(data-value);
                top: 6px;
                left: -8px;
                right: -8px;
                position: absolute;
                text-align: center;
                font-family: inherit;
                backface-visibility: hidden;
                font-size: 16px;
                font-weight: 500;
                line-height: 21px;
                color: var(--handle-text-color);
                transition: transform .3s ease;
                transform: translateY(var(--y, 0)) scale(var(--s, .7));
            }
            &:after {
                content: '';
                width: 100%;
                height: 100%;
                border-radius: 50%;
                display: block;
                border: 3px solid var(--handle-border);
                background: var(--handle-background);
            }
            &:active,
            &.active {
                --s: 1;
                --y: 44px;
            }
        }
        .smoke {
            background: var(--smoke-background);
            box-shadow: var(--smoke-shadow);
            position: absolute;
            overflow: hidden;
            pointer-events: none;
            left: -4px;
            top: 0;
            width: 41px;
            height: 41px;
            border-radius: 50%;
            transform: scale(0);
        }
    }
}

html {
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
}

* {
    box-sizing: inherit;
    &:before,
    &:after {
        box-sizing: inherit;
    }
}

// dribbble & twitter
body {
    min-height: 100vh;
    font-family: 'Roboto', Arial;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #275EFE;
    font-family: 'Roboto', Arial, sans-serif;
    .dribbble {
        position: fixed;
        display: block;
        right: 20px;
        bottom: 20px;
        img {
            display: block;
            width: 76px;
        }
    }
    .twitter {
        position: fixed;
        display: block;
        right: 112px;
        bottom: 14px;
        svg {
            width: 24px;
            height: 24px;
            fill: white;
        }
    }
}

styles

<link href="https://fonts.googleapis.com/css?family=Roboto:400,500,700&amp;display=swap" rel="stylesheet" />