2 SLIDERS

2 SLIDERS

by firegroove

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/topcoat/0.8.0/css/topcoat-desktop-dark.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.24/vue.js"></script>
<div id="app">
		<regular-slider name="Radius" start="10"></regular-slider>
		<regular-slider name="Opacity" start="100"></regular-slider>
</div>

CSS

#app {
	margin:20px 20px;
	color: #DDD;
}

input[type="range"] {
	margin: 6px;
}

input[type="text"] {
	width: 40px;
}

div {
	margin:10px;
}

span {
	margin:10px;
}

regular-slider {
	display:block;
}

JavaScript

var RegularSlider = Vue.extend({
	props: ['name', 'start'],
	template: '<span>{{ name }}</span><input type="range" v-model="start" class="topcoat-range"><span>{{ start }}</span>',
	data: function() {
		return {
			start: undefined
		}
	}
})

// Register the component
Vue.component('regular-slider', RegularSlider)

var vmApp = new Vue({
	el: '#app',
	data: {}
})