Untitled

dabblet.css

body {
  padding: 2em 0;
  font: 14px/1.5 sans-serif;
  text-align: center;
}

section {
  margin-bottom: 5em;
}

fieldset {
  display: inline-block;
  border: 1px solid #ccc;
  padding: 1rem;
  margin-bottom: 1rem;
}

input[type=range] {
  position: relative;
  z-index: 1;
  appearance: none;
  width: 100%;
  height:100%;
  margin: 0;
  padding: 0;
  background: transparent;
}

input[type=range]:focus {
  outline: 0;
}

input[type=range]::-webkit-slider-thumb {
  appearance: none;
  width: 0;
  height: 5em;
  border-right: 1px solid #fff;
}

.slider {
  display: inline-block;
  position: relative;
  background: #eee;
  vertical-align: middle;
  font-size: 0;
  overflow: hidden;
}

.slider label {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 50%;
  font-size: 1.5rem;
  line-height: 3.5rem;
  text-align: center;
  background: #00cbff;
}

.slider label:nth-child(3) {
  right: 0;
  left: 50%;
  background: #b3ffa8;  
}


.situational {
  position: absolute;
  box-sizing: border-box;
  width: 10em;
  height: 10em;
  overflow: hidden;
  border: 1px solid #ccc;
}

.situational h3 {
  margin: 2rem 0 .2rem 0;
}

.situational .intro {
  position: relative;
  z-index: 1;
  color: #aaa;
}

.situational-set {
  position: relative;
  width: 20em;
  height: 20em;
  margin: auto;
}

.situational-set .on .curve {
  border-color: #6d91ff;
}

.situational-set .on .intro {
  color: #000;
}

.s1 { right:0;  bottom:0;}
.s2 { right:0;  top:0;}
.s3 { left:0;  top:0;}
.s4 { left:0;  bottom:0;}

.s1 .curve {
  position: absolute;
  top: -100%;
  bottom: 30%;
  right: -100%;
  left: 45%;
  border: 20px solid #eee;
  transform: skewX(-12deg);
  border-radius: 100%;
}

.s2 .curve {
  position: absolute;
  top: 20%;
  bottom: -100%;
  right: 42%;
  left: -50%;
  border: 20px solid #eee;
  border-radius: 100%;
}

.s3 .curve {
  position: absolute;
  top: 20%;
  bottom: -80%;
  left: 47%;
  right: -50%;
  border: 20px solid #eee;
  border-radius: 100%;
}

.s4 .curve {
  position: absolute;
  top: -50%;
  bottom: 30%;
  left: -50%;
  right: 40%;
  border: 20px solid #eee;
  transform: skewX(-12deg);
  border-radius: 100%;
}

.slide1 {
  width: 30rem;
}

.slider-small {
  width: 8rem;
  height: 1rem;
}

.slider-small label:nth-child(2) {
  background-color: #080;
}

.slider-small label:nth-child(3) {
  background-color: #ccc;
}

.slide2, .slide3 {
  margin-right: 1rem
}

dabblet.html

<section class="readiness-section">

<div class="situational-set">
<div class="situational s1">
<i class="curve"></i>
<div class="intro"><h3>S1</h3>(高工作 x 低关系)<br>Telling<br>Direction</div>
</div>
<div class="situational s2">
<i class="curve"></i>
<div class="intro"><h3>S2</h3>(高工作 x 高关系)<br>Selling<br>Cocahing</div>
</div>
<div class="situational s3">
<i class="curve"></i>
<div class="intro"><h3>S3</h3>(低工作 x 高关系)<br>Participating<br>Supporting</div>
</div>
<div class="situational s4">
<i class="curve"></i>
<div class="intro"><h3>S4</h3>(低工作 x 低关系)<br>Delegating</div>
</div>
</div>





<h2 id="readiness">准备度</h2>
<fieldset>
<legend id="capacity">能力</legend>
知识 <div class="slider slider-small slide2">
<input type="range" value="50" class="capacity k" rel="readiness">
<label></label>
<label></label>
</div>
经验 <div class="slider slider-small slide3">
<input type="range" value="50" class="capacity e" rel="readiness">
<label></label>
<label></label>
</div>
技能 <div class="slider slider-small slide4">
<input type="range" value="50" class="capacity s" rel="readiness">
<label></label>
<label></label>
</div>
</fieldset>

<br>

<fieldset>
<legend id="willingness">意愿</legend>
信心 <div class="slider slider-small slide2">
<input type="range" value="50" class="willingness c" rel="readiness">
<label></label>
<label></label>
</div>
承诺 <div class="slider slider-small slide3">
<input type="range" value="50" class="willingness p" rel="readiness">
<label></label>
<label></label>
</div>
动机 <div class="slider slider-small slide4">
<input type="range" value="50" class="willingness m" rel="readiness">
<label></label>
<label></label>
</div>
</fieldset>

</section>


<section>

<h2>绩效</h2>
<div class="slider slide1">
<input type="range" value="50">
<label>产出</label>
<label>效果</label>
</div>

</section>

dabblet.js

var sliders = document.querySelectorAll('.slider');

(Array.prototype.slice.call(sliders)).forEach(function(s) {
  s.querySelector('input[type=range]').addEventListener('change', rangeChange, false);
});

var calculator = {
  willingness: function(e) {
    this.willingness[e.classList[1]] = e.value;
    if (e.value < 20) {
      this.willingness.total = 0;
    } else {
      this.willingness.total = Math.round((parseInt((this.willingness.c || 50)) + parseInt((this.willingness.p || 50)) + parseInt((this.willingness.m || 50))) / 3);
    }
    this.readiness();
    document.querySelector('#willingness').innerHTML = '意愿 (' + this.willingness.total + '%)';
  },
  
  capacity: function(e) {
    this.capacity[e.classList[1]] = e.value;
    if (e.value < 20) {
      this.capacity.total = 0;
    } else {
      this.capacity.total = Math.round((parseInt((this.capacity.k || 50)) + parseInt((this.capacity.e || 50)) + parseInt((this.capacity.s || 50))) / 3);
    }
    this.readiness();
    document.querySelector('#capacity').innerHTML = '能力 (' + this.capacity.total + '%)';
  },
  
  readiness: function() {
    var n1 = typeof this.capacity.total == 'undefined'? 50 : parseInt(this.capacity.total);
    var n2 = typeof this.willingness.total == 'undefined'? 50 : parseInt(this.willingness.total);
    var n, r, s;
    if (document.querySelector('.on')) {
      document.querySelector('.on').classList.remove('on');
    }
    if (n1 == 0 || n2 == 0) {
      n = 0;
      r = 'R1';
      s = '.s1';
    } else {
      n = n1 + n2;
      if (n1 <= 50) {
        if (n2 <= 50) {
          r = 'R1';
          s = '.s1';
        } else {
          r = 'R2';
          s = '.s2';
        }
      } else {
        if (n2 <= 50) {
          r = 'R3';
          s = '.s3';
        } else {
          r = 'R4';
          s = '.s4';
        }
      }
    }
    document.querySelector(s).classList.add('on');
    document.querySelector('#readiness').innerHTML = '准备度 (' + r + ', ' + Math.round((n/2)) + '%)';
  }
};

function rangeChange() {
  var labels = this.parentNode.querySelectorAll('label')
  labels[0].style.cssText = 'right:' + (100 - this.value) + '%';
  labels[1].style.cssText = 'left:' + this.value + '%';
  if (this.classList[0]) {
    calculator[this.classList[0]].call(calculator, this);
  }
}

settings.json

{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"javascript"}