0

I'm having some issue making a mixin for slider.js, I have created my module with the following structure,

.
├── composer.json
├── etc
│   └── module.xml
├── registration.php
└── view
    └── frontend
        ├── requirejs-config.js
        └── web
            └── js
                └── slider-mixin.js

On requirejs-config.js

var config = {
    config: {
        mixins: {
            "jquery/ui-modules/slider": {
                "Vendor_Module/js/slider-mixin": true
            }
        },
    }
};

On my mixin

define(['jquery'], function ($) {
    'use strict';

    return function (widget) {

        $.widget('ui.slider', widget, {
            _createHandles: function () {
                var i, handleCount,
                    options = this.options,
                    existingHandles = this.element.find(".ui-slider-handle").addClass("ui-state-default ui-corner-all"),
                    handle = "<a class='ui-slider-handle ui-state-default ui-corner-all' href='#'><span class='sr-only'>Slider Handle</span></a>",
                    handles = [];

                handleCount = (options.values && options.values.length) || 1;

                if (existingHandles.length > handleCount) {
                    existingHandles.slice(handleCount).remove();
                    existingHandles = existingHandles.slice(0, handleCount);
                }

                for (i = existingHandles.length; i < handleCount; i++) {
                    handles.push(handle);
                }

                this.handles = existingHandles.add($(handles.join("")).appendTo(this.element));

                this.handle = this.handles.eq(0);

                this.handles.each(function (i) {
                    $(this).data("ui-slider-handle-index", i);
                });
            },
        });

        return $.ui.slider;
    }
});

However, I'm getting an error

Uncaught TypeError: base is not a constructor
    widget jQuery
    <anonymous> pub/static/version1635490463/frontend/Vendor/theme/el_GR/Vendor_Module/js/slider-mixin.js:12

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy