DynamicRangeSlider is not working properly.

[ashwini987]

In DynamicRangeSlider "RangeLabel" props is working, but I want to it shows me only 2 or 3 decimal digits. It Shows me all the decimal digit after decimal point that's why I can not show the $ sign in my Label. And also issue in RangeSelection my product's maximum range is 39.45 but the slider is set 39 that's why I can not show the my last product. And another thing in DynamicRangeSlider is if my product range is 0-10 $ then slider is set to 0-9 $ and I can not show my products which price is grater than 9 $ and less than 10 $.

[divyanshu013]

@ashwini987 we've fixed the issue in v2 (which is currently in alpha release). You may test it out on the alpha channel or wait for a stable release which would be out soon. Thanks for reporting :v:

[dweep119]

@divyanshu013 I am facing another issue in Dynamic RangeSlider which is, I select the range of price and product category, according to that Dynamic RangeSlider is change which is actually not meaningful. If I select particular range of price and I select another category it change the range of price so I need to again set the range. Example: I set (0-100) price range and select another XYZ category which contain product whose price range is (60-500) after selecting XYZ category, Dynamic RangeSlider change the range, Which is I don't want.

Thanks & Regards.

[dhruvdutt]

@dweep119 You can use RangeSlider instead of DynamicRangeSlider. RangeSlider allows you to set fixed range. You can check out the playground demo or codesandbox demo.

[dhruvdutt]

@ashwini987 The v2 stable release is out. 🎉

[ashwini987]

@divyanshu013 if we use RangeSilder instead of DynamicRangeSilder then i have to change in my .js file if there any changes in pricerange in future. Is there any solution in future for DynamicRangeSilder that allows to me set fixed range.

[dhruvdutt]

@ashwini987 Remove react prop from DynamicRangeSilder so it won't listen to changes from other reactive components and the range would remain fixed.

[ashwini987]

i am not using react prop in DynamicRangeSilder. ------- this my two react component ------ <DynamicRangeSlider componentId="DynamicRangeSensor" appbaseField="min_price" title="Price Range" defaultSelected={(min, max) => ( { "start": min, "end": max } )}

                           rangeLabels={(min, max) => (
                             {
                               "start": "$ "+ min ,
                               "end": "$ "+ max
                             }
                           )}
                         />

                          <div className="col s9" id="ResultCard">
                        <ResultCard
                            appbaseField="title"
                             stream={true}
                             sortBy="desc"
                             from={0}
                             size={15}
                             pagination={true}
                             paginationAt="bottom"
                             scrollOnTarget={window}
                             pages={5}
                             showResultStats={true}
                             onData={this.onData}
                             pagination={true}
                             initialLoader = "Loading......"
                             sortOptions={[
                                        {
                                                label: "Best Match",
                                                appbaseField: "_score",
                                                sortBy: "desc"
                                        },
                                        {
                                                label: "Lowest Price First",
                                                appbaseField: "min_price",
                                                sortBy: "asc"
                                        },
                                        {
                                                label: "Highest Price First",
                                                appbaseField: "min_price",
                                                sortBy: "desc"
                                        }
                                ]}
                            react={{
                                    and: ["SearchSensor","DynamicRangeSensor","CategoryMultilistSensor","ColorsMultilistSensor","BrandMultilistSensor"]
                            }}

                        />
                    </div> 

Right now if i change the range of price and then select the sort method from dropdown like lowest price, highest price , best match at that time range silder change to default value. it is not fixed to that price range that i selected. this is my issue. Is there any solution for this ??

[divyanshu013]

@dhruvdutt in v2 we're currently using defaultSelected as an object. We should make it accept a function as we did in v1. Check docs for the API spec. Also we should include support for rangeLabels prop which accept a function that returns an object with the start and end values.

• [x] Add defaultSelected support as function
• [x] Add rangeLabels support

[ashwini987]

@dhruvdutt Right now i m using version2 (v2) in that i stuck at ResultCard i m not getting my products. i am importing,

ReactiveBase,
  ResultCard,
  CategorySearch,
  MultiList,
  DynamicRangeSlider

i got data for Search,Category, price,Colours,Brands but i am not able to getting data in ResultCard for that what should i do ?? Here i m attach the image where u can see

[siddharthlatest]

@ashwini987 How does your ResultCard component look like? That can help us tell better.

[ashwini987]

This is my version1 (V1) image looks like

[siddharthlatest]

I meant code wise.

[ashwini987]

onData Fun

onData(res) {
      console.log("res",res);
    const result = {
      image :  "imageUrl" + res._source.default_image,
      desc : (
        <div className="icon">
            <button className="js-add-to-cart" data-id={res._id}>
              <span className="fa fa-shopping-cart"></span>
            </button>
            <button className="js-add-to-wishlist" data-id={res._id}>
              <span className="fa fa-heart"></span>
            </button>
            <button className="js-add-to-compare" data-id={res._id}>
              <span className="fa fa-random"></span>
            </button>

          <div className="product-info">
            <div className="pull-right product-price">${res._source.min_price}</div>
            <a><span className="product-title">{res._source.product_name}</span></a>
          </div>
        </div>
      )
    };

    return result;
  }

ResultCard Component

<div className="col s9" id="ResultCard">
              <ResultCard
                 componentId="results"
                 dataField="title"
                 stream={true}
                 sortBy="desc"
                 from={0}
                 size={15}
                 pagination={true}
                 paginationAt="bottom"
                 scrollOnTarget={window}
                 pages={5}
                 showResultStats={true}
                 onData={this.onData}
                 initialLoader = "Loading......"
                 sortOptions={[
                      {
                          label: "Best Match",
                          appbaseField: "_score",
                          sortBy: "desc"
                      },
                      {
                          label: "Lowest Price First",
                          appbaseField: "min_price",
                          sortBy: "asc"
                      },
                      {
                          label: "Highest Price First",
                          appbaseField: "min_price",
                          sortBy: "desc"
                      }
                  ]}
                react={{
                    and: ["SearchSensor","DynamicRangeSensor","CategoryMultilistSensor","ColorsMultilistSensor","BrandMultilistSensor"]
                }}

              />
            </div>    

[siddharthlatest]

onData's return value has a small change. desc should be description.

[ashwini987]

I am also trying this, but it is still not working..

[divyanshu013]

Hi @ashwini987, can you try the DynamicRangeSlider on version 2.1.0? Let me know if it works

[divyanshu013]

Hey @ashwini987 @dweep119, were you able to try this out on v2.1.0?

[dweep119]

Hey @divyanshu013, Yes, We are able to use DynamicRangeSlider on version 2.1.0. But, I am not yet checked it is work as we discuss above.

[divyanshu013]

Okay, let me know when you get a chance to test it

[divyanshu013]

Closing this for now. Please reopen if the issue persists