ion.rangeSlider test playground

HTML

<script src="http://ionden.com/a/plugins/ion.rangeSlider/static/js/ion-rangeSlider/ion.rangeSlider.js"></script>
<link rel="stylesheet" href="http://ionden.com/a/plugins/ion.rangeSlider/static/css/ion.rangeSlider.css">
<link rel="stylesheet" href="http://ionden.com/a/plugins/ion.rangeSlider/static/css/ion.rangeSlider.skinFlat.css">
<div id="range"></div>
<button id="getValues">Get Slider Values</button>
<div id="result"></div>

CSS

body {
    margin: 40px 20px;
}

#getValues {
  margin: 20px 0;
}

JavaScript

$("#range").ionRangeSlider({
        type: "double",
        min: 0,
        max: 100,
        from: 0,
        to: 100
    });

    var slider = $("#range").data("ionRangeSlider");

$("#getValues").click(function (e) {
        e.preventDefault();
        		
        var from = slider.result.from
    		var to = slider.result.to

	    	var resultString = "Result: from: " + from + " to: " + to;
    		$("#result").html(resultString);
});