Instantsearch.js: RangeSlider renders but isn't dragable?

[Braunson]

Type: Bug
Current Behavior: Renders but is not draggable
Expected Behavior: Draggable
Browser: Google Chrome Version 64.0.3282.140 (Official Build) (64-bit) (But happens on every one I've tested)

Image:

The element renders properly, except you cannot drag either end?

[Haroenv]

@Braunson, do you have this behaviour reproducible in a CodeSandbox (template here)? It will be pretty much impossible to debug this without more information.

Thanks!

[Braunson]

@Haroenv I have tried and can't recreate it via CodeSandbox. I'm using webpack to include things which I suspect may be part of the cause. Here's some more information..

Update: I downgraded to the 2.4.1 release and everything works properly so I can use that for now. However it's the ^2.5.0 release where it stops working (being draggable).

package.json

        "instantsearch.js": "^2.5.0",

app.js

import instantsearch from 'instantsearch.js/es';
import {searchBox, hits, rangeSlider, toggle, pagination, sortBySelector, stats} from 'instantsearch.js/es/widgets';

// placeholder keys
const search = instantsearch({
    appId: 'latency',
    apiKey: '6be0576ff61c053d5f9a3225e2a90f76',
    indexName: 'instant_search',
    urlSync: true
});

// initialize SearchBox
search.addWidget(
    searchBox({
        container: '#search-keywords',
        placeholder: 'Enter a few keywords'
    })
);

// initialize results - template to change
var hitTemplate =
    '<div class="hit col-sm-3">' +
    '<div class="pictures-wrapper">' +
      '<img class="picture" src="{{picture_url}}" />' +
      '<img class="profile" src="{{user.user.thumbnail_url}}" />' +
    '</div>' +
    '<div class="infos">' +
    '<h4 class="media-heading">{{{_highlightResult.name.value}}}</h4>' +
    '<p>{{room_type}} - {{{_highlightResult.city.value}}}, {{{_highlightResult.country.value}}}</p>' +
    '</div>' +
    '</div>';
var noResultsTemplate = '<div class="text-center">No results found matching <strong>{{query}}</strong>.</div>';
search.addWidget(
    hits({
        container: document.querySelector('#search-results'),
        hitsPerPage: 50,
        templates: {
            empty: noResultsTemplate,
            item: hitTemplate
        }
    })
);

// sliders
search.addWidget(
    rangeSlider({
        container: document.querySelector('#slider-calories'),
        attributeName: 'calories',
        pips: false,
        tooltips: {format: function(rawValue) {return parseInt(rawValue);}},
        min: 0,
        max: 1000
    })
);
search.addWidget(
    rangeSlider({
        container: document.querySelector('#slider-proteins'),
        attributeName: 'proteins',
        pips: false,
        tooltips: {format: function(rawValue) {return parseInt(rawValue) + ' g';}},
        min: 0,
        max: 1000
    })
);
search.addWidget(
    rangeSlider({
        container: document.querySelector('#slider-carbohydrates'),
        attributeName: 'carbohydrates',
        pips: false,
        tooltips: {format: function(rawValue) {return parseInt(rawValue) + ' g';}},
        min: 0,
        max: 1000
    })
);
search.addWidget(
    rangeSlider({
        container: document.querySelector('#slider-fats'),
        attributeName: 'fats',
        pips: false,
        tooltips: {format: function(rawValue) {return parseInt(rawValue) + ' g';}},
        min: 0,
        max: 1000
    })
);

// stats
search.addWidget(
    stats({
        container: document.querySelector('#stats-container')
    })
);

// Start the search
search.start();

app.scss

// Algolia Instant Search
@import url('https://cdn.jsdelivr.net/npm/[email protected]/dist/instantsearch.min.css');
@import url('https://cdn.jsdelivr.net/npm/[email protected]/dist/instantsearch-theme-algolia.min.css');

index.html

<link href="app.css" rel="stylesheet">

<!-- Sliders -->
<div id="slider-proteins"></div>
<div id="slider-calories>"</div>
<div id="slider-carbohydrates"></div>
<div id="slider-fats"></div>

<div id="search-results"></div>
<script src="app.js"></script>

[bobylito]

Do you have any issues when you using our tourism demo or the storybook like demo?

[Braunson]

@bobylito No issues on either of those. I've tried different browsers with my code and it seems the only common items are:

1. Webpack
2. v2.5.0 version

This is a fresh install and use of instantsearch.js, I have no other vendor scripts or anything included. I am using Laravel Mix which is a webpack wrapper but that _shouldn't_ have anything to do with it.

[bobylito]

I can't reproduce your issue. Can you provide a repro test case @Braunson ?

[Braunson]

@bobylito Seems I can re-create it but only with Laravel Mix and only for version 2,5,0+

[bobylito]

@Braunson is there a way for you to share one example? Maybe using surge.sh to share your static html page?

[Braunson]

@bobylito I had issues with surge.sh and tried to re-create it in codesandbox.io without any luck reproducing it . It has to be something with Laravel Mix and it's webpack configuration or something. Since this seems to just be an issue I'm having I'll close this thread.

[Haroenv]

We still want to fix this for you! Can you make a laravel mix project we can clone?

[Braunson]

@Haroenv Thanks for reopening, I've been away but tried to recreate this issue in a standalone Laravel Mix project and wasn't able to so I'm closing for now. Cheers 👍

[Haroenv]

Thanks for following up!