Porting from https://github.com/appbaseio/reactivesearch/issues/148. **I'm submitting a ...** <!-- (check one with "x") --> - [ ] bug report - [ ] feature request - [x] other Related to UI/Ux of playground stories. - [x] [RangeSlider and DynamicRangeSlider story](https://opensource.appbase.io/playground/?knob-title=Cars&knob-filterLabel=Cars%20filter&knob-defaultSelected%5B0%5D=Auckland&knob-rangeLabels=%7B%22start%22%3A%22Low%22%2C%22end%22%3A%22High%22%7D&knob-componentStyle=%7B%22paddingBottom%22%3A%2210px%22%7D&knob-URLParams%20%28not%20visible%20on%20storybook%29=false&knob-showFilter=true&knob-showIcon=false&knob-stepValue=1&knob-showHistogram=true&knob-dataLabel=%E2%98%85%20%20A%20customizable%20UI%20widget%20%E2%98%85&knob-showSlider=false&knob-size=100&knob-iconPosition=left&knob-visible=true&knob-showCount=true&knob-interval=1&knob-multiSelect=true&selectedKind=search%2FDynamicRangeSlider&selectedStory=Basic&full=0&down=1&left=1&panelRight=0&downPanel=storybooks%2Fstorybook-addon-knobs): Use a different dataset or different field where histogram has an interesting distribution of values. - [x] ReactiveList uses a really bland UI. - [x] [With customIcon story](https://opensource.appbase.io/playground/?knob-title=Cities&knob-filterLabel=Cars%20filter&knob-defaultSelected=Auckland&knob-rangeLabels=%7B%22start%22%3A%22Low%22%2C%22end%22%3A%22High%22%7D&knob-componentStyle=%7B%22paddingBottom%22%3A%2210px%22%7D&knob-URLParams%20%28not%20visible%20on%20storybook%29=false&knob-showFilter=true&knob-showIcon=false&knob-stepValue=1&knob-showHistogram=true&knob-dataLabel=%E2%98%85%20%20A%20customizable%20UI%20widget%20%E2%98%85&knob-showSlider=false&knob-size=100&knob-iconPosition=left&knob-visible=true&knob-showCount=false&knob-interval=1&knob-multiSelect=true&selectedKind=search%2FCategorySearch&selectedStory=with%20custom%20icon&full=0&down=1&left=1&panelRight=0&downPanel=storybooks%2Fstorybook-addon-knobs): Use a car icon here. - [x] [autosuggest should have no camel cases](https://opensource.appbase.io/playground/?knob-title=Cities&knob-weights%5B0%5D=1&knob-weights%5B1%5D=3&knob-filterLabel=Cars%20filter&knob-defaultSelected=nissan&knob-rangeLabels=%7B%22start%22%3A%22Low%22%2C%22end%22%3A%22High%22%7D&knob-queryFormat=and&knob-componentStyle=%7B%22paddingBottom%22%3A%2210px%22%7D&knob-URLParams%20%28not%20visible%20on%20storybook%29=false&knob-showFilter=true&knob-showIcon=false&knob-stepValue=1&knob-showHistogram=true&knob-dataLabel=%E2%98%85%20%20A%20customizable%20UI%20widget%20%E2%98%85&knob-showSlider=false&knob-size=100&knob-iconPosition=left&knob-fuzziness=1&knob-visible=true&knob-showCount=false&knob-interval=1&knob-highlight=true&knob-autoSuggest=false&knob-multiSelect=true&selectedKind=search%2FCategorySearch&selectedStory=Without%20autoSuggest&full=0&down=1&left=1&panelRight=0&downPanel=storybooks%2Fstorybook-addon-knobs)  - [x] [MultiDropdownRange: Filter shows on the right side panel](https://opensource.appbase.io/playground/?knob-title=SingleDropdownRange%3A%20Price%20Filter&knob-data=%7B%22label%22%3A%22Car%20Ratings%22%2C%22start%22%3A2%2C%22end%22%3A5%7D&knob-weights%5B0%5D=1&knob-weights%5B1%5D=3&knob-filterLabel=Price&knob-defaultSelected%5B0%5D=Cheap&knob-defaultSelected%5B1%5D=Moderate&knob-rangeLabels=%7B%22start%22%3A%22Low%22%2C%22end%22%3A%22High%22%7D&knob-labelPosition=right&knob-selectAllLabel=All%20Cities&knob-queryFormat=and&knob-componentStyle=%7B%22paddingBottom%22%3A%2210px%22%7D&knob-URLParams%20%28not%20visible%20on%20storybook%29=false&knob-showFilter=true&knob-sortBy=asc&knob-showIcon=false&knob-showResultStats=false&knob-stepValue=1&knob-showHistogram=true&knob-dataLabel=%E2%98%85%20%20A%20customizable%20UI%20widget%20%E2%98%85&knob-showSlider=false&knob-showCheckbox=true&knob-fieldWeights%5B0%5D=1&knob-fieldWeights%5B1%5D=3&knob-size=10&knob-iconPosition=right&knob-fuzziness=1&knob-visible=true&knob-showCount=false&knob-placeholder=Search%20prices&knob-interval=1&knob-showSearch=false&knob-highlightField=name&knob-highlight=false&knob-autoSuggest=true&knob-multiSelect=true&selectedKind=search%2FMultiDropdownRange&selectedStory=With%20filter&full=0&down=1&left=1&panelRight=0&downPanel=storybooks%2Fstorybook-addon-knobs): It should show above the filter component - [x] [DataPicker](https://opensource.appbase.io/playground/?knob-focused=true&knob-title=Date%20Picker&knob-data=%7B%22label%22%3A%22Car%20Ratings%22%2C%22start%22%3A2%2C%22end%22%3A5%7D&knob-weights%5B0%5D=1&knob-weights%5B1%5D=3&knob-filterLabel=Date&knob-defaultSelected=2017-04-07&knob-rangeLabels=%7B%22start%22%3A%22Low%22%2C%22end%22%3A%22High%22%7D&knob-labelPosition=right&knob-selectAllLabel=All%20Cities&knob-queryFormat=epoch_millis&knob-numberOfMonths=2&knob-componentStyle=%7B%22paddingBottom%22%3A%2210px%22%7D&knob-URLParams%20%28not%20visible%20on%20storybook%29=false&knob-showFilter=true&knob-sortBy=asc&knob-showIcon=false&knob-showResultStats=false&knob-stepValue=1&knob-showHistogram=true&knob-dataLabel=%E2%98%85%20%20A%20customizable%20UI%20widget%20%E2%98%85&knob-showSlider=false&knob-showCheckbox=true&knob-fieldWeights%5B0%5D=1&knob-fieldWeights%5B1%5D=3&knob-size=10&knob-dayPickerInputProps=%7B%22clickUnselectsDay%22%3Atrue%7D&knob-iconPosition=right&knob-fuzziness=1&knob-visible=true&knob-showCount=false&knob-placeholder=Pick%20date&knob-interval=1&knob-showSearch=false&knob-highlightField=name&knob-highlight=false&knob-autoSuggest=true&knob-multiSelect=true&selectedKind=search%2FDatePicker&selectedStory=Playground&full=0&down=1&left=1&panelRight=0&downPanel=storybooks%2Fstorybook-addon-knobs) is missing a story for selecting an initial month. - [x] Set maxWidth / outer container to make the story components look good. - [ ] RangeSlider show native tooltip on slider handles (add in library)
Porting from appbaseio/reactivesearch#148.
I'm submitting a ...
Related to UI/Ux of playground stories.