evalcraciun/jsbin.gasog.css

## jsbin.gasog.css
.tooltip {
	display: block;
	position: absolute;
	border: 1px solid #D9D9D9;
	font: 400 12px/12px Arial;
	border-radius: 3px;
	background: #fff;
	top: -43px;
	padding: 5px;
	left: -9px;
	text-align: center;
	width: 50px;
}
.tooltip strong {
	display: block;
	padding: 2px;
}

## jsbin.gasog.html
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
    <script src="http://builds.handlebarsjs.com.s3.amazonaws.com/handlebars-v1.3.0.js"></script>
  <script src="http://builds.emberjs.com/tags/v1.5.0/ember.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/noUiSlider/6.2.0/jquery.nouislider.min.js"></script>
  <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/noUiSlider/6.2.0/jquery.nouislider.css">

</head>
<body>
  <script type="text/x-handlebars">
    <h1>Welcome To my Page </h1>
    {{outlet}}
  </script>
  <script type="text/x-handlebars" id="index">
  <div class="container">

    <div id="tipslider">
      {{income-slider}}
    </div>
   </div>
  </script>

</body>
</html>

## jsbin.gasog.js
var App = Ember.Application.create({});
//create a NoUiSlider Component
App.IncomeSliderComponent = Ember.Component.extend({
  didInsertElement: function(){

    var toolTip = $.Link({
	  target: '-tooltip-'
    });

    var customToolTip = $.Link({
	target: '-tooltip-<div class="tooltip"></div>',
	method: function ( value ) {

		// The tooltip HTML is 'this', so additional
		// markup can be inserted here.
		$(this).html(
			'<strong>Value: </strong>' +
			'<span>' + value + '</span>'
		);
	}
    });
    $("#tipslider").noUiSlider({
      start: [ -1 ],
      step: 1000,
	  range: {
		'min':-1,
        '1%': 1000,
		'max': 30000
	  },
      connect: "lower",
	  serialization: {
		lower: [ toolTip ],
        format: {
            decimals:0
		}
	  }
    });
  }
})
	.tooltip {
	display: block;
	position: absolute;
	border: 1px solid #D9D9D9;
	font: 400 12px/12px Arial;
	border-radius: 3px;
	background: #fff;
	top: -43px;
	padding: 5px;
	left: -9px;
	text-align: center;
	width: 50px;
	}
	.tooltip strong {
	display: block;
	padding: 2px;
	}
	<!DOCTYPE html>
	<html>
	<head>
	<script src="//code.jquery.com/jquery.min.js"></script>
	<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
	<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
	<meta charset="utf-8">
	<title>JS Bin</title>
	<script src="http://builds.handlebarsjs.com.s3.amazonaws.com/handlebars-v1.3.0.js"></script>
	<script src="http://builds.emberjs.com/tags/v1.5.0/ember.js"></script>
	<script src="//cdnjs.cloudflare.com/ajax/libs/noUiSlider/6.2.0/jquery.nouislider.min.js"></script>
	<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/noUiSlider/6.2.0/jquery.nouislider.css">

	</head>
	<body>
	<script type="text/x-handlebars">
	<h1>Welcome To my Page </h1>
	{{outlet}}
	</script>
	<script type="text/x-handlebars" id="index">
	<div class="container">

	<div id="tipslider">
	{{income-slider}}
	</div>
	</div>
	</script>

	</body>
	</html>
	var App = Ember.Application.create({});
	//create a NoUiSlider Component
	App.IncomeSliderComponent = Ember.Component.extend({
	didInsertElement: function(){

	var toolTip = $.Link({
	target: '-tooltip-'
	});

	var customToolTip = $.Link({
	target: '-tooltip-<div class="tooltip"></div>',
	method: function ( value ) {

	// The tooltip HTML is 'this', so additional
	// markup can be inserted here.
	$(this).html(
	'<strong>Value: </strong>' +
	'<span>' + value + '</span>'
	);
	}
	});
	$("#tipslider").noUiSlider({
	start: [ -1 ],
	step: 1000,
	range: {
	'min':-1,
	'1%': 1000,
	'max': 30000
	},
	connect: "lower",
	serialization: {
	lower: [ toolTip ],
	format: {
	decimals:0
	}
	}
	});
	}
	})