cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - Activehtmlicon-personicon-teamoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

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.

            
              <div class="vh-100 flex items-center ph2 mw5-5 center">
  <div class="flex-auto bg-white br2 pa3 pt4 ba b--black-20 flex flex-column items-center items-stretch shadow-4">
    
    <h1 class="f4 dark-gray tc mb0 mt4">How much do you weigh?</h1>
    <p class="tc f5 moon-gray lh-copy mb4">This is used to set up and calculate your recommended daily consumption.<p>
    
    <div class="tc mb2">
      <span id="lbs-value" class="ma0 f2 b dark-gray">125</span>
      <span class="ma0 moon-gray">lbs</span>
    </div>
    
    <p class="ma0 tc mb4 moon-gray f6"><span id="kg-value">56</span> kg</p>
    
    <div class="dial mb4"></div>
    
    <p class="mb4 mt0 pv4 tc moon-gray">You can update this later.</p>
    
    <div class="tc">
      <a href="#0"
        class="f6 db link dim br2 pa3 white bg-blue ttu tracked border-box">
        calculate
      </a>
    </div>
  </div>
</div>

<!-- <svg viewBox="0 0 300 100" 
     class="w-100" 
     style="cursor: move;">

  <g id="ticks">

    <g>
      <path d="M -75,25 V 100"
            stroke="#CCCCCC"
            stroke-width="2" />
      <path d="M -60,50 V 100"
          stroke="#EEEEEE"
          stroke-width="1" />
      <path d="M -45,50 V 100"
          stroke="#EEEEEE"
          stroke-width="1" />
      <path d="M -30,50 V 100"
          stroke="#EEEEEE"
          stroke-width="1" />
      <path d="M -15,50 V 100"
          stroke="#EEEEEE"
          stroke-width="1" />
    </g>

    <g>
      <path d="M 0,25 V 100"
            stroke="#CCCCCC"
            stroke-width="2" />
      <path d="M 15,50 V 100"
          stroke="#EEEEEE"
          stroke-width="1" />
      <path d="M 30,50 V 100"
          stroke="#EEEEEE"
          stroke-width="1" />
      <path d="M 45,50 V 100"
          stroke="#EEEEEE"
          stroke-width="1" />
      <path d="M 60,50 V 100"
          stroke="#EEEEEE"
          stroke-width="1" />
    </g>

    <g>
      <path d="M 75,25 V 100"
            stroke="#CCCCCC"
            stroke-width="2" />
      <path d="M 90,50 V 100"
            stroke="#EEEEEE"
            stroke-width="1" />
      <path d="M 105,50 V 100"
            stroke="#EEEEEE"
            stroke-width="1" />
      <path d="M 120,50 V 100"
            stroke="#EEEEEE"
            stroke-width="1" />
      <path d="M 135,50 V 100"
            stroke="#EEEEEE"
            stroke-width="1" />
    </g>

    <g>
      <path d="M 150,25 V 100"
            stroke="#CCCCCC"
            stroke-width="2" />
      <path d="M 165,50 V 100"
            stroke="#EEEEEE"
            stroke-width="1" />
        <path d="M 180,50 V 100"
            stroke="#EEEEEE"
            stroke-width="1" />
        <path d="M 195,50 V 100"
            stroke="#EEEEEE"
            stroke-width="1" />
        <path d="M 210,50 V 100"
            stroke="#EEEEEE"
            stroke-width="1" />
    </g>

    <g>
      <path d="M 225,25 V 100"
            stroke="#CCCCCC"
            stroke-width="2" />
      <path d="M 240,50 V 100"
            stroke="#EEEEEE"
            stroke-width="1" />
        <path d="M 255,50 V 100"
            stroke="#EEEEEE"
            stroke-width="1" />
        <path d="M 270,50 V 100"
            stroke="#EEEEEE"
            stroke-width="1" />
        <path d="M 285,50 V 100"
            stroke="#EEEEEE"
            stroke-width="1" />
    </g>

    <g>
      <path d="M 300,25 V 100"
            stroke="#CCCCCC"
            stroke-width="2" />
      <path d="M 315,50 V 100"
            stroke="#EEEEEE"
            stroke-width="1" />
        <path d="M 330,50 V 100"
            stroke="#EEEEEE"
            stroke-width="1" />
        <path d="M 345,50 V 100"
            stroke="#EEEEEE"
            stroke-width="1" />
        <path d="M 360,50 V 100"
            stroke="#EEEEEE"
            stroke-width="1" />
    </g>

  </g>

  <path d="M 150,0 V 100" 
        stroke="#357EDD"
        stroke-width="2" /> 

</svg> -->

            
          
!
            
              :root {
  --x: 16px;
}

body { background-color: #F6FFFE; }

.dial {
  background-image: 
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='75' height='100' stroke='#EEEEEE' stroke-width='1'><path d='M 0,25 V 100' stroke='#CCCCCC' stroke-width='2' /><path d='M 15,50 V 100' /><path d='M 30,50 V 100' /> <path d='M 45,50 V 100' /><path d='M 60,50 V 100' /></svg>");
  background-position: 50% 50%;
  background-position-x: var(--x);
  background-repeat: repeat-x;
  cursor: move;  
  height: 100px;
  position: relative;
}

.dial:after {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  width: 2px;
  height: 100px;
  transform: translate3d(-1px, 0, 0);
  background-color: #357EDD;
}

.mw5-5 { width: 384px; }
            
          
!
            
              const dial = document.querySelector('.dial');
const lbs = document.querySelector('#lbs-value');
const kg = document.querySelector('#kg-value');
const hDial = new Hammer(dial, { direction: Hammer.DIRECTION_HORIZONTAL });
let state = { weight: 125, x: 16 };
lbs.innerText = state.weight;
kg.innerText = lbsToKg(state.weight).toFixed(1);

const dialPan$ = Rx.Observable
  .fromEventPattern(e => hDial.on('pan panend', e), () => {})
  .map(({ deltaX, type, direction }) => {
    if (type === 'panend') {
      state = updateState(state, { delta: deltaX });
      return `${ state.x }px`;
    }
   
    render(state.weight - deltaX * 5 / 75);
    return `${ state.x + deltaX }px`;
  });

const style$ = RxCSS({
  x: dialPan$,
});

function render(weight) {
  lbs.innerText = weight.toFixed(0);
  kg.innerText = lbsToKg(weight).toFixed(1);
}

function updateState(prevState = 0, { delta }) {
  const snappedDelta = (Math.round(delta / 15) * 15);
  
  return { 
    weight: prevState.weight - (snappedDelta * 5 / 75),
    x: prevState.x + snappedDelta,
  };
}

function lbsToKg(weight) {
  return weight * 0.453592;
}
            
          
!
999px
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console