Range slider

landlord tenant

by dixalex

HTML

<script src="https://s.rrimr.com/ui/slider/jquery.ui.labeledslider.js"></script>
<link rel="stylesheet" href="https://s.rrimr.com/ui/slider/jquery.ui.labeledslider.css">
<div class='ncp_slider_container'>
  <div id="ncp_slider" class="ncp_slider_range_div"></div>
</div>

CSS

.ncp_slider_container {
		  margin: 2em auto 4em auto;
		  max-width: 740px;
      width: auto;
		}

		.ncp_slider_range_div {
		  display: inline-block;
		  float: left;
		  width: 72%;
		  cursor: pointer;
		}

		.ui-slider-range {
		  background: #FFF;
		}

		.ncp_slider_range_div.ui-slider .ui-slider-handle {
		  width: 15px;
		  height: 1.5em;
		  margin-left: -.47em;
		  border: solid 1px #000;
		  cursor: pointer;
		}

		.ncp_slider_range_div .ui-state-default {
		  background: none;
		}

		.ncp_slider_range_div.ui-slider div.minHandle {
		  border: solid 1px #c1e4e8;
		  background-color: #c1e4e8;
		}

		.ncp_slider_range_div.ui-slider div.maxHandle {
		  background-color: red;
		  display: none;
		}

		.ui-slider-range.ui-corner-all.ui-widget-header {
		  background-color: #48bfbb;
		}

		.ui-slider-label-ticks>span {
		  line-height: 1.33em;
		  font-weight: bold;
		  color: blue;
		  text-align: left;
		  margin-top: .45em;
      min-width: 3em;
      min-height: 3em;
      cursor: pointer;
		}

JavaScript

//Source: http://jsfiddle.net/AeCsL/1/
		  //How to change jQuery UI Slider handle - http://stackoverflow.com/a/21710144/5076162
		  $("#ncp_slider").each(function(i, el) {
		    jQuery(el).append('<div class="minHandle ui-slider-handle" title="tenant"><a></a></div>');
		  });


		  //Source: http://bseth99.github.io/jquery-ui-extensions/tests/visual/index.html
		  $("#ncp_slider").labeledslider({
		    range: false,
		    max: 4,
		    value: $('.question :checked').length ? parseInt($('.question input:checked').val(), 10) - 1 : 2,
		    tickArray: [0, 1, 2, 3, 4],
		    tickLabels: {
		      0: 'Classy, <br/>Refined, <br/>Elegant',
		      1: '&#160;',
		      2: '&#160;',
		      3: '&#160;',
		      4: 'Edgy, <br/>Daring, <br/>Trendy'
		    },
		    slide: function(event, ui) {
		      console.log(ui.handle);
		      $('.question input:radio').filter(function(index, element) {
		        return (parseInt($(element).val(), 10) - 1) === (parseInt(ui.handleIndex, 10))
		      }).prop('checked', true).change();
		    },
		    create: function(event, ui) {
		      var labels = $(event.target).closest('.ncp_slider_container').find('.ui-slider-label-ticks > span');
		      console.log(labels);
		      labels.each(function(index, element) {
		        $(element).on('click touch', function(evt) {
		          $("#ncp_slider").labeledslider('value', index);
		        });
		      });
		    }
		  });