Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<link class="jsbin" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js"></script>
  <script src="https://raw.github.com/SteveSanderson/knockout/master/build/output/knockout-latest.debug.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
<!--[if IE]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
  article, aside, figure, footer, header, hgroup, 
  menu, nav, section { display: block; }
  #slider {
  width: 400px;
  margin-bottom: 15px;
  margin-top: 7px;
  float: left; }
​
.value-input {
  margin-bottom: 15px;
  margin-left: 5px; }
​
.plan {
  width: 800px;
  background-color: #FFF2E6;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  padding: 15px;
  zoom: 1; }
  .plan.red {
    color: red; }
  .plan.green {
    color: green; }
  .plan.blue {
    color: blue; }
  .plan.orange {
    color: orange; }
  .plan .description {
    color: black; 
  }
  .plan img {
    float: left;
    margin-right: 15px; 
  }
  .plan:before, .plan:after {
    display: table;
    content: "";
    zoom: 1; 
  }
  .plan:after {
    clear: both; 
  }
  
</style>
  
</head>
<body>
         <div id="slider"></div>
    <input type="text" data-bind="value: selected" class="value-input"/>
    
​
        <div class="plan red" data-bind="rangeVisible: selected, range: {min: 0, max:10}">
            <img src="http://lorempixel.com/output/abstract-q-c-100-100-5.jpg" alt=""/>
            <div class="title">
                red
            </div>
            <div class="description">
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt 
                ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci 
                tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum 
                iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat 
            </div>
​
        </div>    
        <div class="plan green" data-bind="rangeVisible: selected, range: {min: 11, max:20}">
            <img src="http://lorempixel.com/output/abstract-q-c-100-100-1.jpg" alt=""/>
            <div class="title">
                green
            </div>
            <div class="description">
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt 
                ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci 
                tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum 
                iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat 
            </div>
        </div>    
        <div class="plan blue" data-bind="rangeVisible: selected, range: {min: 21, max:30}">
​
            <img src="http://lorempixel.com/output/abstract-q-c-100-100-2.jpg" alt=""/>
            <div class="title">
                blue
            </div>
            <div class="description">
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt 
                ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci 
                tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum 
                iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat 
            </div>
        </div>    
        <div class="plan orange" data-bind="rangeVisible: selected, range: {min: 31, max:40}">
            <img src="http://lorempixel.com/output/abstract-q-c-100-100-3.jpg" alt=""/>
​
            <div class="title">
                orange
            </div>
            <div class="description">
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt 
                ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci 
                tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum 
                iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat 
            </div>
        </div> 
</body>
</html>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers