noUiSlider con array de datos

by Jorgelig

HTML

<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/noUiSlider/6.2.0/jquery.nouislider.min.css">
<script src="//cdn.jsdelivr.net/jquery.nouislider/7.0.10/jquery.nouislider.all.min.js"></script>
<div class="row-fluid">
    <div class="col-md-6">
        <button id="sale-btn">Venta</button>
        <button id="rent-btn">Renta</button>
    </div>
    <div class="col-md-6">
        <span id="event-text">***</span>
    </div>
</div>
<div class="row-fluid">
    <div class="col-md-3">
        <p>
            <div class="sliders" id="slider1"></div>
            <div id="skip-value-lower">-</div>
            <div id="skip-value-upper">-</div>
        </p>
    </div>
</div>

CSS

#skip-value-lower, #skip-value-upper {
    width: 150px;
    display: inline-block;
    margin-top:15px;
}

JavaScript

var minValue = 0;
var maxValue = 10000;
var moneyFormat = wNumb({
	mark: '.',
	thousand: ',',
	prefix: '$ '
});


$('#slider1').noUiSlider({
    start: [50, 2500],
    range: {
        'min': 0,
            //'10%': 50,
            //'30%': 2500,
            //'50%': 5000,
        'max': 10000
    },
    step: 1,
    format: wNumb({
		decimals: 0,
		thousand: ',',
        prefix: '$ ',
	})
});

$("#slider1").on({
	slide: function(event, ui){
        console.log("min: ", minValue," : " , moneyFormat.from(ui[0]));
        if(moneyFormat.from(ui[1]) == maxValue)
            $("#skip-value-upper").html("Max");
        if(moneyFormat.from(ui[0]) == minValue)
            $("#skip-value-lower").html("Min");
	},
	set: function(event, ui){
		//$("#event-text").html('set');
        //console.log("set: ",ui);
	},
//	change: function(event, ui){
//		$("#event-text").html('change');
//        console.log("slide: ",ui);
//	}
});


$("#slider1").Link('lower').to($("#skip-value-lower"));

$("#slider1").Link('upper').to($("#skip-value-upper"));

$("#sale-btn").on('click', function () {
    maxValue = 12000000;
    $('#slider1').noUiSlider({
        range: {
            'min': 0,
                '20%': 500000,
                '40%': 1500000,
                '50%': 3000000,
                '80%': 6000000,
                'max': 12000000
        },
        start: [1500000, 3000000],
        step: 1000
    }, true);

});
$("#rent-btn").on('click', function () {
    maxValue = 120000;
    $('#slider1').noUiSlider({
        range: {
            'min': 0,
                '20%': 5000,
                '40%': 15000,
                '60%': 30000,
                '80%': 60000,
                'max': 120000
        },
        start: [15000, 60000],
        step: 100
    }, true);
});