diff --git a/brand-app/components.js b/brand-app/components.js
index 54034a3..5aa5a9d 100644
--- a/brand-app/components.js
+++ b/brand-app/components.js
@@ -23,6 +23,7 @@ import "./pages/page-ucdlib-sils-search-redirect";
import "./pages/page-ucdlib-md";
import "./pages/page-ucdlib-header";
import "./pages/page-ucdlib-primary-nav.js";
+import "./pages/page-ucdlib-range-slider.js";
// non-component js.
import {PageWidthController} from '../elements/utils/controllers';
diff --git a/brand-app/index.js b/brand-app/index.js
index 0e7ec55..02f388a 100644
--- a/brand-app/index.js
+++ b/brand-app/index.js
@@ -1,6 +1,7 @@
import './ucdlib-theme-brand-app.js';
// IMPORT APP PAGES HERE
+import "./pages/page-ucdlib-range-slider.js";
// guides
import "./pages/page-overview.js";
diff --git a/brand-app/pages/page-ucdlib-range-slider.js b/brand-app/pages/page-ucdlib-range-slider.js
new file mode 100644
index 0000000..62a3816
--- /dev/null
+++ b/brand-app/pages/page-ucdlib-range-slider.js
@@ -0,0 +1,30 @@
+import { LitElement } from 'lit';
+import {render, styles} from "./page-ucdlib-range-slider.tpl.js";
+
+import {Mixin, MainDomElement} from '../../elements/utils/mixins';
+import {BrandedPageElement, MdElement} from "../utils/index.js";
+
+export default class PageUcdlibRangeSlider extends Mixin(LitElement)
+ .with(MainDomElement, BrandedPageElement, MdElement) {
+
+ static get properties() {
+ return {
+ };
+ }
+
+ static get styles() {
+ return styles();
+ }
+
+ constructor() {
+ super();
+ this.render = render.bind(this);
+ }
+
+ _onRangeSliderChange(e) {
+ // do something with e.detail, ie {min: 1971, max: 2010, includeUnknown: true}
+ }
+
+}
+
+customElements.define('page-ucdlib-range-slider', PageUcdlibRangeSlider);
\ No newline at end of file
diff --git a/brand-app/pages/page-ucdlib-range-slider.tpl.js b/brand-app/pages/page-ucdlib-range-slider.tpl.js
new file mode 100644
index 0000000..120e72b
--- /dev/null
+++ b/brand-app/pages/page-ucdlib-range-slider.tpl.js
@@ -0,0 +1,93 @@
+import { html, css } from 'lit';
+import '@ucd-lib/theme-elements/ucdlib/ucdlib-range-slider/ucdlib-range-slider';
+
+export function styles() {
+ const elementStyles = css`
+ :host {
+ display: block;
+ }
+ `;
+
+ return [elementStyles];
+}
+
+export function render() {
+ return html`
+ ${this.pageTitle("Range slider with histogram")}
+
The ucdlib-range-slider element is a range slider component with start / end inputs and an optional histogram.
+
+
Using the component
+
+ ${this.examplePanel(html`
+
+
+
+
+ `)}
+
+
+ Note, the .data attribute is expecting an array of objects containing a
+ stat and a value, for instance,
+ [{ stat : 2020, value : 42 }, ..., { stat : 2033, value : 60 }].
+
+
+
+ Also, if there are less than 5 stats to display, the histogram will not be shown. The max number of bins (bars) is 50,
+ so if there are more than 50, multiple stats will be grouped together.
+
+
+
+ When the slider min / max values are changed, or when the "Include unknown/unspecified" checkbox is changed,
+ an event is triggered to range-slider-change.
+ The event details will include min, max, and includeUnknown.
+
+
+
Customizing the component
+
It's possible to override the colors of the histogram and slider, as well as to hide the labels under the min / max ends of the slider.
render histogram bins based on the min and max values from data received,
+ and the width of the rendered svg. smallest bin possible is 6px with 2px gaps,
+ and a max of 50 bins is possible.
+ otherwise data points will be merged to fit within the max bins.
+ if less than 5 bins, histogram will be hidden.
bound to mousemove event on this element. Update min/max
+values based on type of move that is happening ie min, max or range. Does
+nothing if we are not moving.
bound to mouseup/mouseout event on window. It's always best to bind
+this to the window as a catch all. Resets all moving flags
+
+
+
+
+
+### connectedCallback()
+setup our window mouse listeners, fire first render
+
+**Kind**: global function
+
+
+### disconnectedCallback()
+remove our window mouse listeners
+
+**Kind**: global function
+
+
+### \_onResize(evt, reMerge)
+when the window resizes, re-render the histogram
+
+**Kind**: global function
+
+| Param | Type | Description |
+| --- | --- | --- |
+| evt | Event | |
+| reMerge | Boolean | should we re-merge the data, typically when resizing window could cause difference |
+
+
+
+### \_updateHistogram(reMerge)
+render histogram bins based on the min and max values from data received,
+ and the width of the rendered svg. smallest bin possible is 6px with 2px gaps,
+ and a max of 50 bins is possible.
+ otherwise data points will be merged to fit within the max bins.
+ if less than 5 bins, histogram will be hidden.
+
+**Kind**: global function
+
+| Param | Type | Description |
+| --- | --- | --- |
+| reMerge | Boolean | should we re-merge the data, typically when resizing window could cause difference |
+
+
+
+### \_updateHistogramColors()
+update light/medium/dark bin colors in histogram
+
+**Kind**: global function
+
+
+### \_valueToPx(value) ⇒ Number
+given a number line value, return px location relative
+to the widget
+
+**Kind**: global function
+**Returns**: Number - px location
+
+| Param | Type | Description |
+| --- | --- | --- |
+| value | Number | number line value |
+
+
+
+### \_pxToValue(px) ⇒ Number
+given a px location, return number line value
+
+**Kind**: global function
+**Returns**: Number - value
+
+| Param | Type | Description |
+| --- | --- | --- |
+| px | Number | location |
+
+
+
+### \_renderAsync()
+debounce render calls
+
+**Kind**: global function
+
+
+### \_render()
+set top/left px values for buttons/slider
+
+**Kind**: global function
+
+
+### \_onRangeSliderChange()
+moving of range slider has stopped
+
+**Kind**: global function
+
+
+### \_onRangeNullChange()
+bound to input checkbox
+
+**Kind**: global function
+
+
+### \_onInputChange()
+bound to min/max number inputs
+
+**Kind**: global function
+
+
+### \_isFilterApplied() ⇒ Boolean
+is there currenlty a filter set
+
+**Kind**: global function
+
+
+### \_notifySelected()
+notify parent of selection change
+
+**Kind**: global function
+
+
+### reset()
+reset range filter
+
+**Kind**: global function
+
+
+### \_onMoveStart(e)
+bound to btns and center line. Fired when the user mouses
+down on element indicating a move is starting
+
+**Kind**: global function
+
+| Param | Type |
+| --- | --- |
+| e | MouseEvent |
+
+
+
+### \_onMove(e)
+bound to mousemove event on this element. Update min/max
+values based on type of move that is happening ie min, max or range. Does
+nothing if we are not moving.
+
+**Kind**: global function
+
+| Param | Type |
+| --- | --- |
+| e | MouseEvent |
+
+
+
+### \_onMoveStop()
+bound to mouseup/mouseout event on window. It's always best to bind
+this to the window as a catch all. Resets all moving flags
+
+**Kind**: global function
diff --git a/brand-app/ucdlib-theme-brand-app.tpl.js b/brand-app/ucdlib-theme-brand-app.tpl.js
index bbc0bdc..64c78b3 100644
--- a/brand-app/ucdlib-theme-brand-app.tpl.js
+++ b/brand-app/ucdlib-theme-brand-app.tpl.js
@@ -92,6 +92,7 @@ return html`