$(document).ready(function () { var sliderRoofInclinationDegree = $('#pnlRoofInclination .slider').get(0); noUiSlider.create(sliderRoofInclinationDegree, { animate: false, start: [30], range: { 'min': 0, 'max': 50 }, step: 10, pips: { // mode: 'count', // values: 6, // density: 4, // stepped: true mode: 'values', values: ['0', '10', '20', '30', '40', '50'], // \u00B0 density: 4, stepped: true } }); sliderRoofInclinationDegree.noUiSlider.on('update', function (values, handle, unencoded, tap, positions) { // values: Current slider values; // handle: Handle that caused the event; // unencoded: Slider values without formatting; // tap: Event was caused by the user tapping the slider (boolean); // positions: Left offset of the handles in relation to the slider // console.log(parseInt(values[0])); var value = parseInt(values[0]); $('#pnlRoofInclination .area .roof img').attr('src', '/assets/frontend/roof-sideview-' + value + '.png'); $('#pnlRoofInclination .area .degree').html(value + '°'); $('#pnlRoofInclination input[name="roofInclination"]').val(value); }); $('#pnlRoofInclination .slider .noUi-value').bind('click', function () { var value = parseInt($(this).text()); sliderRoofInclinationDegree.noUiSlider.set(value); }); });