Gradient [deg] v2

gradient-deg-v2.markdown

Gradient [deg] v2

A Pen by Andreas Storm on CodePen.

License.

index.html

<header>
	<div id="range"></div>
  <div id="currentVal">
    <span id="spanVal">180deg</span>
    <input type="text" class="one" value="#91e7db"><input type="text" class="two" value="#505a78">
  </div>
</header>
<div class="gradient"></div>

script.coffeescript

color1 = "#91e7db"
color2 = "#505a78"
slider = 180

$("#range").slider
  range: "min"
  max: 360
  value: 180
  slide: (e, ui) ->
    slider = ui.value
    $("#spanVal").html slider + "deg"
    bg = "linear-gradient(" + slider + "deg," + color1 + "," + color2 + ")"
    $(".gradient").css "background-image", bg
    $(".one").css "color", color1
    $(".two").css "color", color2

$(".one").keyup ->
  color1 = $(".one").val()
  color2 = $(".two").val()
  bg = "linear-gradient(" + slider + "deg," + color1 + "," + color2 + ")"
  $(".gradient").css "background-image", bg
  $(".one").css "color", color1
  
$(".two").keyup ->
  color1 = $(".one").val()
  color2 = $(".two").val()
  bg = "linear-gradient(" + slider + "deg," + color1 + "," + color2 + ")"
  $(".gradient").css "background-image", bg
  $(".two").css "color", color2

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>

style.stylus

@import "nib"

html
  height 100%

body
  background-color #292c2f
  font-family monospace
  overflow hidden

input
  background none
  border none
  outline none
  width 200px
  text-align center
  height 70px
  color #ccc
  margin 0
  border-left 1px solid rgba(#111, .4)
  font-size 18px
  &.one
    color #91e7db
  &.two
    color #505a78
  &:focus
    background #fff
    color black

.gradient
  height calc(100% - 70px)
  background-image linear-gradient(180deg,#91e7db,#505a78)
  position absolute
  width 100%

header
  background #252525
  height 70px
  line-height 70px

#currentVal
  color #424242
  text-align center
  font-size 18px
  font-weight 800
  float right
  span
    color #ccc
    width 200px
    display inline-block
    text-align center
  
#range
  width 180px
  border 0
  height 4px
  background #424242
  outline none
  position absolute
  left 30px
  top 32px
  .ui-slider-handle
    position absolute
    margin 0px 0 0 -7px
    border-radius 100%
    background white
    border 0
    height 14px
    width 14px
    outline none
    cursor pointer
    &:hover
    &:focus
      transform scale(1.1)
  .ui-slider-range
    background #4ac1ff
    

styles

<link href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" rel="stylesheet" />