JSFiddle - React, Tailwind, and code Playground

by core972

HTML

<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/[email protected]/lib/index.js"></script>
<div id="app">
<template>
  <div class="block">
    <span class="demonstration">Default value</span>
    <el-slider v-model="value1" :max="2" :format-tooltip="formatTooltip" show-stops></el-slider>
  </div>
</template>
</div>

SCSS

@import url("//unpkg.com/[email protected]/lib/theme-chalk/index.css");

.block{
  padding:15px
}

Babel + JSX

var Main = {
    data() {
      return {
        value1: 0,
        value2: 50,
        value3: 36,
        value4: 48,
        value5: 42
      }
    },
    methods: {
      formatTooltip(val) {
        if(val === 2){
        	return 'Editer et commenter'
        }
        if(val === 1){
        	return 'Commenter';
        }
        return 'Aucun';
      }
    }
  }
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')