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><meta charset="utf-8"><meta name="viewport" content="width=device-width"><title>State listener</title><link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"><script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.4/umd/popper.min.js"></script><script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script><script type="text/javascript" 
src='https://cdn.jsdelivr.net/npm/scarletsframe@0.34.0/dist/scarletsframe.min.js'></script>
  <script type="text/javascript">
    // Polyfill the PointerEvent
    (function(){function z(a){document.write('<script src="'+a+'"><\/script>')}
      if(window.PointerEvent === void 0)
        z('https://code.jquery.com/pep/0.4.3/pep.js');
    })();
  </script>
</head>
<body>
  
  <!---------- Container A --------->
  Visualization:
  <sf-m name="myModel" class="wborder">
    <div sf-each="item in fruits" style="transform: translateX({{ item.x }}px)" class="fruit">
      {{ item.emoji }}
    </div>
  </sf-m>
​
  <!---------- Container B --------->
  Log:
  <sf-m name="myModel" class="wborder">
    <div sf-each="i,item in fruits">
      {{ i+1 }}. <b>{{ item.name }}</b>: {{ item.x }}px
    </div>
  </sf-m>
​
  <!---------- Container C --------->
  Input/Control:
  <sf-m name="myModel">
    <div sf-each="item in fruits">
      <span>{{ item.name }}:</span> <a @click="delete(item)">🔪</a>
      <input sf-bind="item.x" type="range" class="custom-range" min="0" max="400">
    </div>
    
    <a class="add" @click="add">🌲 Find new fruit</a>
  </sf-m>
</body>
</html>
Output

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

Dismiss x
public
Bin info
StefansAryapro
0viewers