<div class="slider">
    <div class="ui-slider-handle">
        <div class="smiley">
            <svg viewBox="0 0 34 10" version="1.1">
                <path d=""></path>
            </svg>
        </div>
    </div>
    <div class="text">
        <span>Current Value</span>
        <strong>-</strong>
    </div>
</div>

<!-- dribbble -->
<a class="dribbble" href="https://dribbble.com/shots/4953172-Smiley-rating-slider" target="_blank"><img src="https://cdn.dribbble.com/assets/dribbble-ball-1col-dnld-e29e0436f93d2f9c430fde5f3da66f94493fdca66351408ab0f96e2ec518ab17.png" alt=""></a>

$range: #000;
$rangeBG: rgba(#000, .2);
$smiley: #000;

.slider {
    width: 320px;
    height: 2px;
    background: $rangeBG;
    border-radius: 2px;
    position: relative;
    .ui-slider-range {
        border-radius: 2px;
        background: $range;
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
    }
    .ui-slider-handle {
        cursor: move;
        cursor: grab;
        cursor: -moz-grab;
        cursor: -webkit-grab;
        width: 32px;
        height: 32px;
        position: absolute;
        outline: none;
        top: 0;
        z-index: 1;
        border-radius: 50%;
        background: #fff;
        box-shadow: 0 2px 7px rgba(#000, .2);
        margin: -1px 0 0 0;
        transform: translate(-50%, -50%);
        transition: box-shadow .3s ease;
        .smiley {
            position: absolute;
            left: 50%;
            bottom: 100%;
            width: 32px;
            height: 32px;
            border-radius: 50%;
            border: 2px solid $smiley;
            opacity: 0;
            transform: translate(-50%, -12px);
            transition: all .3s ease 0s;
            &:before,
            &:after {
                content: '';
                width: 4px;
                height: 4px;
                border-radius: 50%;
                background: $smiley;
                position: absolute;
                top: 8px;
            }
            &:before {
                left: 7px;
            }
            &:after {
                right: 7px;
            }
            svg {
                width: 16px;
                height: 7px;
                position: absolute;
                left: 50%;
                bottom: 5px;
                margin: 0 0 0 -8px;
                path {
                    stroke-width: 3.4;
                    stroke: $smiley;
                    fill: none;
                    stroke-linecap: round;
                }
            }
        }
        &.ui-state-active {
            cursor: grabbing;
            cursor: -moz-grabbing;
            cursor: -webkit-grabbing;
            box-shadow: 0 4px 12px rgba(#000, .32);
            & + .text {
                transform: translate(0, -80px);
                transition: transform .3s ease 0s;
            }
            .smiley {
                opacity: 1;
                transform: translate(-50%, -12px);
                transition: all .3s ease .1s;
            }
        }
    }
    .text {
        position: absolute;
        bottom: 100%;
        left: 0;
        right: 0;
        display: flex;
        justify-content: space-between;
        transform: translate(0, -44px);
        transition: transform .3s ease .2s;
        font-size: 16px;
        strong {
            color: #000;
            font-weight: bold;
        }
    }
}

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

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

// Center & dribbble
body {
    min-height: 100vh;
    font-family: Roboto, Arial;
    color: #ADAFB6;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #fff;
    .dribbble {
        position: fixed;
        display: block;
        right: 20px;
        bottom: 20px;
        opacity: .5;
        transition: all .4s ease;
        &:hover {
            opacity: 1;
        }
        img {
            display: block;
            height: 36px;
        }
    }
}

var step = 100;

$(".slider").each(function() {
    var self = $(this);
    var slider = self.slider({
        create: function() {
            self.find('.text strong').text(self.slider('value'));
            setPathData(self.find('.smiley').find('svg path'), self.slider('value'));
        },
        slide: function(event, ui) {
            self.find('.text strong').text(ui.value);
            setPathData(self.find('.smiley').find('svg path'), ui.value);
        },
        range: 'min',
        min: 1,
        max: step,
        value: 1,
        step: 1
    });
});

function setPathData(path, value) {
    var firstStep = 6 / step * value;
    var secondStep = 2 / step * value;
    path.attr('d', 'M1,' + (7 - firstStep) + ' C6.33333333,' + (2 + secondStep) + ' 11.6666667,' + (1 + firstStep) + ' 17,' + (1 + firstStep) + ' C22.3333333,' + (1 + firstStep) + ' 27.6666667,' + (2 + secondStep) + ' 33,' + (7 - firstStep));
}