noUiSlider example.js

<script>
function RefundCtrl() {
        var self = this;

        var vendorDeliveryFaultSlider;

        var max;

        var invoiceItemId;

        var isPartial = false;

        (function() {
            addReformatAsCurrencyEvent($('#refund_amount_value'));
        })()

        self.openModal = function (isPartialRefund = false) {

            isPartial = isPartialRefund;

            reset();

            initialize();

            $('#refund_modal').modal('toggle')

        }

        function reset() {
            max = undefined;
            invoiceItemId = undefined;

            if (vendorDeliveryFaultSlider && vendorDeliveryFaultSlider.hasOwnProperty('noUiSlider')) {
                vendorDeliveryFaultSlider.noUiSlider.destroy()
            }

            $('#refund_amount_value').removeAttr('readonly').val('');
            $('#preview_refund').removeAttr('disabled');
            $('#save_refund').removeAttr('disabled');
        }


        function initialize() {

            /*let range = divideMaxIntoSubRange(max);

            console.log(range);

            noUiSlider.create(refundAmountSlider, {
                range: {
                    'min': 1,
                    'max': range.length - 1
                },
                start: 0,
                step: 1,
                format: {
                    // 'to' the formatted value. Receives a number.
                    to: function (value) {
                        return value;
                    },
                    // 'from' the formatted value.
                    // Receives a string, should return a number.
                    from: function (value) {
                        return value;
                    }
                }
                // tooltips: [false, wNumb({decimals: 0, thousand: ','}), true],
                // pips: {mode: 'count', values: 10},
            }, true);*/

            invoiceItemId = saCtrl.getInvoiceItemId();

            if (!vendorDeliveryFaultSlider) {
                vendorDeliveryFaultSlider = document.getElementById('vendor_delivery_fault_slider');
            }

            max = getRefundMaxValue();

            if (max === undefined) {
                return;
            }

            if (max === 0) {
                toastr.warning('مبلغی برای عودت وجود ندارد!', 'ثبت عودت');
                $('#refund_amount_value').attr('readonly', 'readonly').val(0);
                $('preview_refund').attr('disabled', 'disabled');
                $('save_refund').attr('disabled', 'disabled');

            }

            $('#refund_amount_max_value').val(max.currency_template() + ' ریال');

            if (!isPartial) {
                $('#refund_amount_value').attr('readonly', 'readonly').val(max);
            }

            noUiSlider.create(vendorDeliveryFaultSlider, {
                range: {
                    'min': 0,
                    'max': 100
                },
                format: {
                    // 'to' the formatted value. Receives a number.
                    to: function (value) {
                        return value;
                    },
                    from: function (value) {
                        return value;
                    }
                },
                step: 1,
                start: 100,
                pips: {mode: 'count', values: 5},
                tooltips: [
                    {
                        // 'to' the formatted value. Receives a number.
                        to: function (value) {
                            return value + ' %';
                        },
                        from: function (value) {
                            return value;
                        }
                    }
                ],
            });

            // refundAmountSlider.noUiSlider.on('update', function (values, handle) {
            //     $('#refund_amount_slider_value').val(range[values[handle]].currency_template())
            // });

            var pips = vendorDeliveryFaultSlider.querySelectorAll('.noUi-value');

            function clickOnPip() {
                var value = Number(this.getAttribute('data-value'));
                vendorDeliveryFaultSlider.noUiSlider.set(value);
            }

            for (var i = 0; i < pips.length; i++) {
                $(pips[i]).addClass('bg-primary');
                pips[i].addEventListener('click', clickOnPip);
            }

            // vendorDeliveryFaultSlider.noUiSlider.on('update', function (values, handle) {
            //     $('#vendor_delivery_fault_slider_value').val(values[handle])
            // });
        }

        function getRefundMaxValue() {

            return 50000000;

            let query = '{' +
                '}';

            let variables = {
                invoiceItemId: invoiceItemId,
            };


            let max;
            newQueryRequest({query: query, variables: variables}, function (response) {
                if (!response.data) {
                    window.queryResult = false;
                    toastr.warning(returnErrorsAsString(response.errors), 'پیش نمایش عودت');
                    return;
                }

                window.queryResult = true;
                max = response.data.getMaxRefundAmount;
            });

            return max;
        }

        self.previewRefund = function () {
            let query = '{' +
                '}';

            newQueryRequest({query: query, variables: makeRequestVariablesObject()}, function (response) {
                if (!response.data) {
                    window.queryResult = false;
                    toastr.warning(returnErrorsAsString(response.errors), 'پیش نمایش عودت');
                    return;
                }

                $('#customer_delivery_cost').val();
                $('#vendor_delivery_cost').val();
                $('#vendor_product_portion').val();
                $('#basalam_product_portion').val();

                window.queryResult = true;
            });

            return max;
        }

        function makeRequestVariablesObject() {
            let variables = {
                invoiceItemId: invoiceItemId,
                vendorFault: vendorDeliveryFaultSlider.noUiSlider.get(),
            };

            if (isPartial) {
                variables.amount = $('#refund_amount_value').data('amount');
            }
        }

        self.saveRefund = function () {

            let data = {
                status: $('#status').val(),
                description: $('#refund_description').val(),
                invoice_id: saCtrl.getInvoiceId(),
                invoice_item_id: invoiceItemId,
                vendorFault: vendorDeliveryFaultSlider.noUiSlider.get()
            };

            if (isPartial) {
                data.amount = $('#refund_amount_value').data('amount');
            }

            saCtrl.requestCreateStatus(data);
        }

        function divideMaxIntoSubRange(amount)
        {
            let chunckAmount;
            if (amount > 0 && amount <= 500000) {
                chunckAmount = 500;
            } else if (amount > 500000 && amount <= 1000000) {
                chunckAmount = 1000;
            } else if (amount > 1000000 && amount <= 5000000) {
                chunckAmount = 10000;
            } else if (amount > 5000000 && amount <= 10000000) {
                chunckAmount = 100000;
            } else {
                chunckAmount = 1000000;
            }

            return makeSliderRange(amount, chunckAmount, 1);
        }

        function makeSliderRange(amount, chunckAmount, minValue = 0)
        {
            let range = [];
            range.push(minValue.toString());
            for (let i=0; i <= amount; i += chunckAmount) {
                if (i <= minValue) {
                    continue;
                }

                range.push(i.toString());
            }

            if (range[range.length - 1] != amount) {
                range.push(amount);
            }

            return range;
        }
    }

    var refundCtrl = new RefundCtrl();

  </script>