var valuesSlider = document.getElementById('values-slider');
var valuesForSlider = [1,2,3,4,5,6,7,8,10,12,14,16,20,24,28,32]; // 16 values

var format = {
    to: function(value) {
        return valuesForSlider[Math.round(value)];
    },
    from: function (value) {
        return valuesForSlider.indexOf(Number(value));
    }
};

noUiSlider.create(valuesSlider, {
    start: [8, 24],
    // A linear range from 0 to 15 (16 values)
    range: { min: 0, max: valuesForSlider.length - 1 },
    // steps of 1
    step: 1,
    tooltips: true,
    format: format,
    pips: { mode: 'steps', format: format },
});

// The display values can be used to control the slider
valuesSlider.noUiSlider.set(['7', '28']);

var arbitraryValuesSlider = document.getElementById('arbitrary-values-slider');
var arbitraryValuesForSlider = ['128MB', '256MB', '1GB', '8GB', '16GB', '32GB'];

var format = {
    to: function(value) {
        return arbitraryValuesForSlider[Math.round(value)];
    },
    from: function (value) {
        return arbitraryValuesForSlider.indexOf(value);
    }
};

noUiSlider.create(arbitraryValuesSlider, {
    // start values are parsed by 'format'
    start: ['1GB', '16GB'],
    range: { min: 0, max: arbitraryValuesForSlider.length - 1 },
    step: 1,
    tooltips: true,
    format: format,
    pips: { mode: 'steps', format: format, density: 50 },
});

var formatSlider = document.getElementById('formatting-slider');
var formatForSlider = {
    from: function (formattedValue) {
        return Number(formattedValue);
    },
    to: function(numericValue) {
        return Math.round(numericValue);
    }
};

noUiSlider.create(formatSlider, {
    // Values are parsed as numbers using the "from" function in "format"
    start: ['20.0', '80.0'],
    range: {
        'min': 0,
        'max': 100
    },
    format: formatForSlider,
    tooltips: {
        // tooltips are output only, so only a "to" is needed
        to: function(numericValue) {
            return numericValue.toFixed(1);
        }
    }
});

// Values are parsed as numbers using the "from" function in "format"
formatSlider.noUiSlider.set(['25.666', '57.66']);

var formatValues = [
    document.getElementById('formatting-start'),
    document.getElementById('formatting-end')
];

formatSlider.noUiSlider.on('update', function (values, handle, unencoded) {
    // "values" has the "to" function from "format" applied
    // "unencoded" contains the raw numerical slider values
    formatValues[handle].innerHTML = values[handle] + '
No format: ' + unencoded[handle];
});

var slider = document.getElementById('slider');

noUiSlider.create(slider, {
    start: [0, 100],
    connect: true,
    range: {
        'min': 0,
        'max': 100
    }
});

var sliderNoOverlap = document.getElementById('slider-no-overlap');

noUiSlider.create(sliderNoOverlap, {
    start: [50, 50],
    connect: true,
    range: {
        'min': 0,
        'max': 100
    }
});

var sliderFit = document.getElementById('slider-fit');

noUiSlider.create(sliderFit, {
    start: [0, 100],
    connect: true,
    range: {
        'min': 0,
        'max': 100
    }
});

var roundSlider = document.getElementById('slider-round');

noUiSlider.create(roundSlider, {
    start: 50,
    connect: 'lower',
    range: {
        'min': 0,
        'max': 100
    }
});

var squareSlider = document.getElementById('slider-square');

noUiSlider.create(squareSlider, {
    start: 50,
    range: {
        'min': 0,
        'max': 100
    }
});