Slider 1

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">
	<div id="radius">
		<span>Radius:</span>
		<input type="range" v-model="radius" class="topcoat-range">
		<span>{{ radius }}</span>	
	</div>
	<div id="opacity">
		<span>Opacity:</span>
		<input type="range" v-model="opacity" class="topcoat-range">
		<input type="text" v-model="opacity" class="topcoat-text-input">
	</div>

</div>

CSS

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

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

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

div {
	margin:10px;
}

span {
	margin:10px;
}

JavaScript

var globalModel = {
	radiusModel: {
		radius: 0
	},
	opacityModel: {
		opacity:100
	}
};

var vmRadius = new Vue({
	el: '#radius',
	data: globalModel.radiusModel
});

var vmOpacity = new Vue({
	el: '#opacity',
	data: globalModel.opacityModel
});

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