Gravatar for

Question by DEEPTHI KATTA, Nov 14, 2016 10:03 PM

Facet Slider Initialize initialStartOfSlider and initialEndOfSlider

I would like to set Minimum and Maximum values on the slider from code.

How can I achieve this from JS Framework -

  1. If I need to do this, do I have to leave Maximum/Minimum values on layout to be empty? Or can I auto generate and later overwrite these values from code?

  2. Which event should I be patching on to? BeforeInitialization or afterinitialization

  3. How do I assign these values from code - I tried passing in setSelectedValues and a number array and it does not work and fails at the internal method it calls

    I am wondering if I am doing it the wrong way.

Gravatar for

Comment by DEEPTHI KATTA, Nov 15, 2016 12:21 AM

I got this working when I hooked up to an event called - afterComponentsInitialization Can some one confirm if below is the correct way to do this?

.on("afterComponentsInitialization", function()
    var test =  Coveo.$('#maxPricing');
    var optionsOfComp = Coveo.$('#maxPricing').coveo().options;    
    optionsOfComp.start = 50000;
    optionsOfComp.end = 850000;

if i try calling setselectedvalues in this event, it does work but does not initialize it with those values, looks like to initialize or override existing min/max selected on layout, we have to update the options. Is my assumption correct?

Gravatar for

Comment by DEEPTHI KATTA, Nov 15, 2016 1:52 AM

On the same note - I am trying to now access 'getSelectedValues' method in buildingQuery event and I get undefined. But, I do see this values set correctly in Query State Model. How do I grab these slider ranges selected by the user ? After i grab that I am wanting to try disjunctionExpression to try and add another filter on a field. I am assuming this is feasible.

1 Reply
Gravatar for

Answer by olamothe, Nov 15, 2016 4:08 PM


The slider facet is special when compared to other components because it tries to automatically calculate it's range and boundary by getting the available range of values in the index.

As such, to function properly, it needs to wait for the first query to return before you can actually interact directly with the slider component. The reason your code fails is that the slider is not even initialized completely when you try to set it's values.

It is not ideal that you have to go through such gymastic to do what you want to achieve. I'll log a story internally so that I can investigate how we can make this easier in the future.

For now, you could instead use the "state" of the interface to achieve what you need. Assuming you set a data-id='maxPricing' on your slider facet, you could do it like this :

.on('afterInitialization', function() {
    var state = Coveo.$('#search').coveo('state');
    state.set('f:@maxPricing:range', [50000, 850000]);
Gravatar for

Comment by DEEPTHI KATTA, Nov 15, 2016 8:45 PM

Yep. Thanks. It would help for this to be much easier, I practically had to go over the ts file of slider to see which method can get me what I need. I could also make get values working by calling a helper method that was defined on ts file. I lost my changes unfortunately, but, I remember I used this getSliderBoundaryForQuery to get the values of slider set from buildingQuery.

Ask a question