Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                .knob
    .knob-outer
        .knob-inner
            .knob-arrow.up
            .knob-value 0
            .knob-arrow.down
            .knob-value-progress
        .knob-indicator.contrast(data-angle="0")
        .knob-indicator.brightness(data-angle="0")
    .progress-label.contrast Contrast
    .progress-label.brightness Brightness
    svg.progress-bars(width="500", height="500")
        //- contrast progress bar
        path(d="M 240 445 A 190 195 0 1 1 240 55" fill="transparent" 
            stroke="#dbdbdb" stroke-width="10" stroke-linecap="round")
        path(d="M 240 445 A 190 195 0 1 1 240 55" fill="transparent" 
            stroke="#f47231" stroke-width="10" stroke-linecap="round"
            stroke-dasharray="605 605" id="contrast-progress")

        //- brightness progress bar 
        path(d="M 260 445 A 190 195 0 1 0 260 55" fill="transparent" 
            stroke="#dbdbdb" stroke-width="10" stroke-linecap="round")
        path(d="M 260 445 A 190 195 0 1 0 260 55" fill="transparent" 
            stroke="#208ef4" stroke-width="10" stroke-linecap="round"
            stroke-dasharray="605 605" id="brightness-progress")
              
            
!

CSS

              
                /** Mixins **/
center-children()
    display flex
    justify-content center
    align-items center


/** Base Styles **/
*
*::before
*::after
    margin 0
    padding 0
    box-sizing border-box


html
    font-size 62.5%


body
    center-children()
    height 100vh
    font-family "Roboto", "Myriad Pro", sans-serif
    line-height 1
    background url("http://i1067.photobucket.com/albums/u422/arnellebalane/background_zpsifao5spd.jpg") center center no-repeat
    background-size cover
    user-select none


/** Knob Styles **/
.knob
    center-children()
    width 50rem
    height 50rem
    position relative


.knob-outer
    center-children()
    width 33rem
    height 33rem
    position relative
    z-index 1
    border-radius 50%
    background-color #42444a
    overflow hidden

    &::before
        content ""
        position absolute
        left -10rem
        bottom 5rem
        width 10rem
        height 10rem
        border-radius 50%
        box-shadow 0 0 10rem 10rem #d5a362
        opacity 0.25


.knob-inner
    center-children()
    flex-direction column
    width 24rem
    height 24rem
    position relative
    border-radius 50%
    background-color #f2f2f2
    overflow hidden


.knob-value
    width 12rem
    height 12rem
    margin 2rem 0
    position relative
    z-index 1
    font-size 6rem
    font-weight 100
    text-align center
    line-height 12rem
    color #71727b
    border-radius 50%
    background-color #fff


.knob-value-progress
    height 0
    position absolute
    left 0
    right 0
    bottom 0
    background-color #d8e3ea
    transition height 500ms ease-out


.knob-arrow
    width 4rem
    height 1.5rem
    position relative
    z-index 1
    cursor pointer
    outline none

    &::before
    &::after
        content ""
        width 2.4rem
        height 3px
        position absolute
        top 0
        left 50%
        background-color #ccc
        transform-origin left center
        transform rotate(30deg)

    &::after
        transform rotate(150deg)


    &.down::before
    &.down::after
        top auto
        bottom 0
        transform rotate(-30deg)

    &.down::after
        transform rotate(-150deg)


.knob-indicator
    width 1rem
    height 1rem
    border 1px solid #fff
    position absolute
    top calc(50% - 0.5rem)
    left calc(50% - 0.5rem)
    z-index 1
    border-radius 50%
    cursor pointer
    transition background-color 250ms ease-out
    
    &:hover
        background-color #fff


.progress-label
    width 10rem
    position absolute
    top 50%
    font-size 1.4rem
    text-align center
    text-transform uppercase
    color #a0a2a9

    &.contrast
        left -2.5rem
        transform rotate(-90deg)

    &.brightness
        right -2.5rem
        transform rotate(90deg)


/** Progress Bars Styles **/
.progress-bars
    position absolute
    top 0
    left 0
    right 0
    bottom 0


    path
        stroke-dashoffset 605
        transition stroke-dashoffset 500ms ease-out

              
            
!

JS

              
                var knob = $('.knob-value');
var knobProgress = $('.knob-value-progress');
var contrastProgress = $('#contrast-progress');
var contrastIndicator = $('.knob-indicator.contrast');
var brightnessProgress = $('#brightness-progress');
var brightnessIndicator = $('.knob-indicator.brightness');

var draggedIndicator = null;

setKnobValue(45, true);
setContrast(40);
setBrightness(70);


$(document).on('click', '.knob-arrow', function(e) {
    e.stopPropagation();
    var knobValue = +knob.text();
    if ($(this).is('.up') && knobValue < 100) {
        setKnobValue(knobValue + 1);
    } else if ($(this).is('.down') && knobValue > 0) {
        setKnobValue(knobValue - 1);
    }
});

$(document).on('click', knobInteract);

$(document).on('mousedown', '.knob-indicator', function() {
    draggedIndicator = $(this);
});

$(document).on('mousemove', function(e) {
    if (draggedIndicator) {
        knobInteract(e);
    }
});

$(document).on('mouseup', function() {
    draggedIndicator = null;
})


function knobInteract(e) {
    var origin = {
        x: window.innerWidth / 2,
        y: window.innerHeight / 2
    };
    var target = { x: e.pageX, y: e.pageY };
    var angle = angleBetween(origin, target);
    angle = (angle + 90) % 360;
    if (angle > 3 && angle < 177) {
        let contrast = (angle - 3) / 174 * 100;
        setContrast(contrast);
    } else if (angle > 183 && angle < 357) {
        let brightness = 100 - (angle - 183) / 174 * 100;
        setBrightness(brightness);
    }
}


function setKnobValue(value, initial = false) {
    knob.text(value);
    knobProgress.css('height', `${ value }%`);
}


function setContrast(value) {
    var totalLength = contrastProgress[0].getTotalLength();
    var percentage = value / 100;
    var progress = totalLength - (totalLength * percentage);
    var angle = 174 * percentage + 93;
    var indicator = getPointAtAngleFrom({ x: 0, y: 0 }, angle, 142);
    contrastProgress.css('stroke-dashoffset', progress);
    contrastIndicator.css('transform', [
        `translateX(${ indicator.x }px)`,
        `translateY(${ indicator.y }px)`
    ].join(' '));
}


function setBrightness(value) {
    var totalLength = brightnessProgress[0].getTotalLength();
    var percentage = value / 100;
    var progress = totalLength - (totalLength * percentage);
    var angle = 174 - (174 * percentage + 87);
    var indicator = getPointAtAngleFrom({ x: 0, y: 0 }, angle, 142);
    brightnessProgress.css('stroke-dashoffset', progress);
    brightnessIndicator.css('transform', [
        `translateX(${ indicator.x }px)`,
        `translateY(${ indicator.y }px)`
    ].join(' '));
}


function getPointAtAngleFrom(origin, angle, distance) {
    angle = deg2rad(angle);
    return {
        x: origin.x + Math.cos(angle) * distance,
        y: origin.y + Math.sin(angle) * distance
    };
}


function deg2rad(angle) {
    return angle * (Math.PI / 180);
}


function rad2deg(angle) {
    return angle * (180 / Math.PI);
}


function angleBetween(origin, target) {
    var dy = target.y - origin.y;
    var dx = target.x - origin.x;
    var angle = rad2deg(Math.atan(dy / dx));
    if (angle < 0 && dy < 0) {
        return 180 + angle;
    } else if (angle < 0 && dy >= 0) {
        return 360 + angle;
    } else if (dx > 0) {
        return 180 + angle;
    }
    return angle;
}

              
            
!
999px

Console