@ucd-lib/theme-elements 3.0.2 → 3.0.5

package/brand/ucd-theme-header/ucd-theme-header.tpl.js

@@ -44,8 +44,10 @@ export function styles() {
       .branding-bar-mobile-links {
         display: block;
       }
+      .fixed-mobile .off-canvas__container {
+        padding-bottom: 9rem;
+      }
     }
-
     @media (min-width: 992px) {
       .fixed-desktop .l-navbar {
         position: fixed;
@@ -101,21 +103,26 @@ export function styles() {
   ];
 }
 
-export function render() { 
+export function render() {
 return html`
 ${this.isDemo ? html`
   <style>
     .l-navbar { top: auto !important}
   </style>
 ` : html``}
+${this._hasQuickLinks ? html`
+  <style>::slotted(ucd-theme-search-popup){ --ucd-theme-search-popup--margin-right:-1rem;}</style>
+` : html`
+  <style>::slotted(ucd-theme-search-popup){--ucd-theme-search-popup--margin-right:0;}</style>
+`}
 <header class=${classMap(this._getHeaderClasses())}>
   <div class="mobile-bar">
     <div class="mobile-bar__nav-toggle">
-      <button 
+      <button
         @click=${this._onBtnClick}
-        class="nav-toggle ${this.opened ? 'nav-toggle--active' : ''}" 
-        aria-controls="primary-nav" 
-        aria-expanded="${this.opened ? 'true' : 'false'}" 
+        class="nav-toggle ${this.opened ? 'nav-toggle--active' : ''}"
+        aria-controls="primary-nav"
+        aria-expanded="${this.opened ? 'true' : 'false'}"
         aria-label="Toggle Main Menu">
         <span class="nav-toggle__icon nav-toggle__icon--menu">Menu</span>
       </button>
@@ -175,7 +182,7 @@ ${this.isDemo ? html`
           <div class='branding-bar-mobile-links'>
             <ul>
               ${this._brandingBarLinks.map(link => html`
-                <li><a 
+                <li><a
                   href=${ifDefined(link.href ? link.href : null)}
                   target=${ifDefined(link.newTab ? "_blank": null)}
                   >${link.linkText}</a></li>
@@ -188,6 +195,4 @@ ${this.isDemo ? html`
     </div>
   </div>
 </header>
-  
-
-`;}
+`;}

package/brand/ucd-theme-search-popup/ucd-theme-search-popup.tpl.js

@@ -8,6 +8,9 @@ export function styles() {
     :host {
       display: block;
     }
+    .search-popup__open::after {
+      margin-right: var(--ucd-theme-search-popup--margin-right, -1rem)
+    }
   `;
 
   return [
@@ -16,10 +19,10 @@ export function styles() {
     elementStyles];
 }
 
-export function render() { 
+export function render() {
 return html`
-<button 
-  class="search-popup__open ${this.opened ? 'search-popup__open--close' : ''}" 
+<button
+  class="search-popup__open ${this.opened ? 'search-popup__open--close' : ''}"
   @click=${this._onBtnClick}>
   <span class="search-popup__open-icon">${this.buttonText}</span>
 </button>
@@ -34,4 +37,4 @@ return html`
 
 </div>
 
-`;}
+`;}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ucd-lib/theme-elements",
-  "version": "3.0.2",
+  "version": "3.0.5",
   "description": "Custom elements for the UCD brand theme",
   "main": "index.js",
   "scripts": {

package/ucdlib/ucdlib-range-slider/ucdlib-range-slider.js

@@ -0,0 +1,595 @@
+import { LitElement } from 'lit';
+
+import render from './ucdlib-range-slider.tpl.js';
+
+import './ucdlib-range-slider.js';
+
+export default class UcdlibRangeSlider extends LitElement {
+  static get properties() {
+    return {
+      data : { type: Array },
+      mergedData : { type: Array },
+
+      // slider/date input values
+      absMin: { type: Number },
+      absMax: { type: Number },
+      min: { type: Number },
+      max: { type: Number },
+
+      // labels for slide btns
+      minLabel: { type: String },
+      maxLabel: { type: String },
+
+      isMoving: { type: Boolean },
+      movingType: { type: String },
+      movingMin: { type: Boolean },
+      movingMax: { type: Boolean },
+
+      showUnknown: { type: Boolean },
+
+      // track width and height of widget so we don't have to ask the DOM
+      width: { type: Number },
+      height: { type: Number },
+      btnHeight: { type: Number },
+
+      hideHistogram: { type: Boolean, attribute: 'hide-histogram' },
+      hideSliderLabels: { type: Boolean, attribute: 'hide-slider-labels' },
+
+      // colors for histogram
+      lightColor: { type: String, attribute: 'light-color' },
+      mediumColor: { type: String, attribute: 'medium-color' },
+      darkColor: { type: String, attribute: 'dark-color' }
+    };
+  }
+
+  constructor() {
+    super();
+    this.render = render.bind(this);
+    this.active = true;
+
+    this.data = [];
+    this.mergedData = [];
+
+    this.absMin = 0;
+    this.absMax = 0;
+    this.min = this.absMin;
+    this.max = this.absMax;
+    this.showUnknown = false;
+
+    this.minLabel = '';
+    this.maxLabel = '';
+    this.width = 1;
+    this.height = 50;
+    this.btnHeight = 1;
+    this.movingType = '';
+    this.movingMin = false;
+    this.movingMax = false;
+    this.isMoving = false;
+    this.hasRendered = false;
+    this.hideHistogram = false;
+    this.hideSliderLabels = false;
+    this.lightColor = '#CCE0F3';
+    this.mediumColor = '#73ABDD';
+    this.darkColor = '#13639E';
+
+    // consts to build histogram
+    this.gapPx = 2;
+    this.minBinWidth = 6;
+    this.minBins = 5;
+    this.maxBins = 50;
+
+    this._windowResizeListener = this._onResize.bind(this);
+    this._windowMouseListener = this._onMoveStop.bind(this);
+  }
+
+  /**
+   * @method connectedCallback
+   * @description setup our window mouse listeners, fire first render
+   */
+  connectedCallback() {
+    super.connectedCallback();
+
+    this.addEventListener('mousemove', (e) => this._onMove(e));
+    this.addEventListener('touchmove', (e) => this._onMove(e));
+
+    window.addEventListener('resize', this._windowResizeListener);
+    window.addEventListener('mouseup', this._windowMouseListener);
+    window.addEventListener('mouseout', this._windowMouseListener);
+    window.addEventListener('touchend', this._windowMouseListener);
+    window.addEventListener('touchcancel', this._windowMouseListener);
+  }
+
+  /**
+   * @method disconnectedCallback
+   * @description remove our window mouse listeners
+   */
+  disconnectedCallback() {
+    super.disconnectedCallback();
+
+    window.removeEventListener('resize', this._windowResizeListener);
+    window.removeEventListener('mouseup', this._windowMouseListener);
+    window.removeEventListener('mouseout', this._windowMouseListener);
+    window.removeEventListener('touchend', this._windowMouseListener);
+    window.removeEventListener('touchcancel', this._windowMouseListener);
+  }
+
+  willUpdate(e) {
+    if (!this.hasRendered) {
+      requestAnimationFrame(() => {
+        this._onResize(null, false);
+        this._renderAsync();
+      });
+      this.hasRendered = true;
+    }
+  }
+
+  /**
+   * @method _onResize
+   * @description when the window resizes, re-render the histogram
+   *
+   * @param {Event} evt
+   * @param {Boolean} reMerge should we re-merge the data, typically when resizing window could cause difference
+   */
+  _onResize(evt, reMerge=true) {
+    this.width = this.offsetWidth || 1;
+    this.height = this.offsetHeight;
+    this.left = this.offsetLeft;
+    let lowNumberBtn = this.shadowRoot.querySelector('#lowNumberBtn');
+    if (lowNumberBtn) {
+      this.height = 50;
+      this.btnHeight = 25;
+      this._render();
+    }
+
+    this._updateHistogram(reMerge);
+  }
+
+  /**
+   * @method _updateHistogram
+   * @description 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.
+   *
+   * @param {Boolean} reMerge should we re-merge the data, typically when resizing window could cause difference
+   */
+  _updateHistogram(reMerge=false) {
+    if( this.hideHistogram ) return;
+
+    this.absMin = this.data?.[0]?.stat || 0;
+    this.absMax = this.data?.[this.data?.length - 1]?.stat || 0;
+
+    if( !this.merged ) {
+      this.min = this.absMin;
+      this.max = this.absMax;
+    }
+
+    if( this.data?.length < 5 ) return this.hideHistogram = true;
+
+    // get bound of svg
+    let svg = this.shadowRoot.getElementById('histogram');
+    let svgWidth = Math.floor(svg.getBoundingClientRect().width);
+    let svgHeight = svg.getBoundingClientRect().height;
+    if( !svgWidth || !svgHeight ) return;
+
+    let maxBarHeight = svgHeight - 20; // space for padding above histo
+    let binWidth = (svgWidth / (this.mergedData.length || this.data.length)) || 1;
+    svg.innerHTML = '';
+
+    // max 50 bins of 6px + 2px gap, so 50*8-2 = 398px min width
+    // if over 50 bins and svgWidth < 398px, need to merge bins
+    // start by merging 2 bins at a time, then 3, etc
+    // only merge initially on render, or when resizing window
+    if( !this.merged || reMerge ) {
+      // merge bins if necessary
+      let mergedData = JSON.parse(JSON.stringify(this.data));
+      let mergedBins = mergedData.length;
+
+      let mergedPerBin = 1;
+
+      while( binWidth < (this.minBinWidth + this.gapPx) || mergedBins > this.maxBins ) {
+        mergedBins = Math.ceil(mergedData.length / 2);
+        binWidth *= 2;
+        mergedData = [];
+        mergedPerBin *= 2;
+
+        for( let i = 0; i < mergedBins; i++ ) {
+          let start = i * mergedPerBin;
+          let end = start + mergedPerBin - 1;
+
+          if( end >= this.data.length ) {
+            mergedData.push(this.data[start]);
+          } else {
+            let mergedValue = this.data[start].value + this.data[end].value;
+            let mergedStat = this.data[start].stat + '-' + this.data[end].stat;
+            mergedData.push({ stat: mergedStat, value: mergedValue });
+          }
+        }
+
+        // recalc after potential merging above,
+        // to fix floating point precision issues when multiplying binWidth multiple times
+        binWidth = (svgWidth / (mergedData || []).length) || 1;
+      }
+
+      this.mergedData = mergedData;
+      this.merged = true;
+    }
+
+    // find the max value in the data
+    let max = Math.max(...this.mergedData.map(d => d.value));
+
+    // create bins
+    this.mergedData.forEach((d, i) => {
+      let barHeight = (d.value / max) * maxBarHeight;
+      let rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
+      rect.setAttribute('x', i * binWidth);
+      rect.setAttribute('y', svgHeight - barHeight);
+      rect.setAttribute('width', binWidth - this.gapPx);
+      rect.setAttribute('height', barHeight);
+      rect.setAttribute('class', 'bin');
+      rect.setAttribute('stat', d.stat);
+      svg.appendChild(rect);
+    });
+
+    this.binWidth = binWidth;
+    this.numBins = (this.mergedData.length || this.data.length);
+
+    this._updateHistogramColors();
+  }
+
+  /**
+   * @method _updateHistogramColors
+   * @description update light/medium/dark bin colors in histogram
+   */
+  _updateHistogramColors() {
+    if( this.hideHistogram ) return;
+
+    let histogram = this.shadowRoot.querySelector('#histogram');
+    if( !histogram ) return;
+
+    let bins = histogram.querySelectorAll('.bin');
+    bins.forEach(bin => {
+      let stat = bin.getAttribute('stat');
+
+      // when data stats are merged, there will be a string of stats separated by a hyphen
+      // ie '2010-2012' for years
+      // color partially selected bins with a medium color
+      let startStat = parseInt(stat.split('-')[0]);
+      let endStat = parseInt(stat.split('-').pop());
+
+      if( (startStat < this.min && endStat < this.min) || (startStat > this.max && endStat > this.max) ) {
+        bin.style.fill = this.lightColor;
+      } else if( startStat >= this.min && endStat <= this.max ) {
+        bin.style.fill = this.darkColor;
+      } else {
+        bin.style.fill = this.mediumColor;
+      }
+    });
+  }
+
+  /**
+   * @method _valueToPx
+   * @description given a number line value, return px location relative
+   * to the widget
+   *
+   * @param {Number} value number line value
+   * @param {Boolean} isMin is this the min value
+   *
+   * @returns {Number} px location
+   */
+  _valueToPx(value, isMin=false) {
+    let px = 0;
+    let range = this.absMax - this.absMin + 1;
+
+    value -= this.absMin;
+    if( !isMin ) value += 1;
+    
+    // no merging of bins
+    if( this.numBins === range ) {
+      px = Math.round(value * this.binWidth);
+    } else {
+      let rangeWidth = this.binWidth / (range / this.numBins);
+      px = Math.round(value * rangeWidth);
+    }
+
+    return px;
+  }
+
+  /**
+   * @method _pxToValue
+   * @description given a px location, return number line value
+   *
+   * @param {Number} px location
+   *
+   * @returns {Number} value
+   */
+  _pxToValue(px) {
+    let range = this.absMax - this.absMin;
+    let valPerPx = range / this.width;
+    return Math.round(px * valPerPx) + this.absMin;
+  }
+
+  /**
+   * @method _renderAsync
+   * @description debounce render calls
+  */
+  _renderAsync() {
+    if (this.renderTimer) {
+      clearTimeout(this.renderTimer);
+    }
+
+    this.renderTimer = setTimeout(() => {
+      this.renderTimer = 0;
+      this._render();
+    }, 0);
+  }
+
+  /**
+   * @method _render
+   * @description set top/left px values for buttons/slider
+   */
+  _render() {
+    let hh = this.height * 0.6;
+
+    // set line heights
+    this.shadowRoot.querySelector('#numberLine').style.top = hh + 'px';
+    this.shadowRoot.querySelector('#fillLine').style.top = hh + 'px';
+
+    // set btn heights
+    let hBtnHeight = this.btnHeight / 2;
+    this.shadowRoot.querySelector('#lowNumberBtn').style.top =
+      hh - hBtnHeight + 6 + 'px';
+    this.shadowRoot.querySelector('#highNumberBtn').style.top =
+      hh - hBtnHeight + 6 + 'px';
+
+    this.shadowRoot.querySelector('#lowNumberLabel').style.top =
+      hh - hBtnHeight - 22 + 'px';
+    this.shadowRoot.querySelector('#highNumberLabel').style.top =
+      hh - hBtnHeight - 22 + 'px';
+
+    // set btn left
+    let lv =
+      this.min < this.absMin ? this.absMin : this.min;
+    let uv =
+      this.max > this.absMax ? this.absMax : this.max;
+
+    let minPxValue = this._valueToPx(lv, true);
+    let maxPxValue = this._valueToPx(uv);
+
+    this.shadowRoot.querySelector('#lowNumberBtn').style.left =
+      minPxValue - hBtnHeight + 'px';
+    this.shadowRoot.querySelector('#highNumberBtn').style.left =
+      maxPxValue - hBtnHeight + 'px';
+
+    this.shadowRoot.querySelector('#lowNumberLabel').style.left =
+      minPxValue - hBtnHeight + 'px';
+    this.shadowRoot.querySelector('#highNumberLabel').style.left =
+      maxPxValue - hBtnHeight + 'px';
+
+    this.shadowRoot.querySelector('#fillLine').style.left = minPxValue + 'px';
+    this.shadowRoot.querySelector('#fillLine').style.width =
+      maxPxValue - minPxValue + 'px';
+
+    this.minLabel = this.min;
+    this.maxLabel = this.max;
+  }
+
+  /**
+   * @method _onRangeSliderChange
+   * @description moving of range slider has stopped
+   */
+  _onRangeSliderChange(e) {
+    this._onRangeNullChange();
+    this._updateHistogramColors();
+  }
+
+  /**
+   * @method _onRangeNullChange
+   * @description bound to input checkbox
+   */
+  _onRangeNullChange(evt) {
+    let value = {
+      gte: this.min,
+      lte: this.max,
+    };
+
+    if( this.shadowRoot.querySelector('#unknown').checked ) {
+      value.includeNull = true;
+    }
+
+    if( evt ) this._notifySelected();
+  }
+
+  /**
+   * @method _onInputChange
+   * @description bound to min/max number inputs
+   */
+  _onInputChange(e) {
+    if( e.currentTarget.id === 'minInput' ) {
+      let min = Number(e.currentTarget.value);
+      if( min < this.absMin ) min = this.absMin;
+      if( min > this.absMax ) min = this.absMax;
+      if( min > this.max ) min = this.max;
+      this.min = min;
+      e.target.value = this.min;
+    } else if( e.currentTarget.id === 'maxInput' ) {
+      let max = Number(e.currentTarget.value);
+      if( max > this.absMax ) max = this.absMax;
+      if( max < this.absMin ) max = this.absMin;
+      if( max < this.min ) max = this.min;
+      this.max = max;
+      e.target.value = this.max;
+    }
+
+    this._render();
+    this._onRangeNullChange();
+    this._updateHistogramColors();
+    this._notifySelected();
+  }
+
+  /**
+   * @method _isFilterApplied
+   * @description is there currenlty a filter set
+   *
+   * @return {Boolean}
+   */
+  _isFilterApplied() {
+    if (
+      this.min === this.absMin &&
+      this.max === this.absMax &&
+      this.shadowRoot.querySelector('#unknown').checked === true
+    ) {
+      return false;
+    }
+    return true;
+  }
+
+  /**
+   * @method _notifySelected
+   * @description notify parent of selection change
+   */
+  _notifySelected() {
+    this.dispatchEvent(
+      new CustomEvent('range-slider-change', {
+        detail: {
+          min: this.min,
+          max: this.max,
+          includeUnknown: this.shadowRoot.querySelector('#unknown').checked
+        },
+      })
+    );
+  }
+
+  /**
+   * @method reset
+   * @description reset range filter
+   */
+  reset() {
+    this.min = this.absMin;
+    this.max = this.absMax;
+    this.shadowRoot.querySelector('#unknown').checked = true;
+
+    this._onRangeNullChange();
+  }
+
+  /**
+   * @method _onMoveStart
+   * @description bound to btns and center line.  Fired when the user mouses
+   * down on element indicating a move is starting
+   *
+   * @param {MouseEvent} e
+   */
+  _onMoveStart(e) {
+    this.movingType = e.currentTarget.getAttribute('prop');
+
+    this.isMoving = true;
+    this.movingMin = this.movingType === 'max' ? false : true;
+    this.movingMax = this.movingType === 'min' ? false : true;
+
+    if( this.movingType === 'range' ) this._onMoveMiddle(e);
+    if( this.movingType === 'outside-range' ) this._onMoveOutsideRange(e);
+  }
+
+  /**
+   * @method _onMove
+   * @description 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.
+   *
+   * @param {MouseEvent} e
+   */
+  _onMove(e) {
+    if (!this.isMoving) return;
+    e.preventDefault();
+
+    // handle both mouse and touch event
+    let left;
+    if (e.type === 'touchmove') {
+      if (!e.changedTouches.length) return;
+      left = e.changedTouches[0].pageX - this.left;
+    } else {
+      left = e.pageX - this.left;
+    }
+
+    if( this.movingType === 'min' ) {
+      this.min = this._pxToValue(left);
+    } else if( this.movingType === 'max' ) {
+      this.max = this._pxToValue(left);
+    }
+
+    if (this.min < this.absMin) {
+      this.min = this.absMin;
+    }
+    if (this.max > this.absMax) {
+      this.max = this.absMax;
+    }
+
+    if (this.min > this.max) {
+      if (this.movingType === 'min') this.min = this.max;
+      else this.max = this.min;
+    }
+    this.hasRendered = false;
+  }
+
+  /**
+   * @method _onMoveMiddle
+   * @description bound to mousemove event on this element.  Update min/max
+   * values based closest min/max button (adjust selection that is closest to mouse position)
+   * @param {MouseEvent} e
+   */
+  _onMoveMiddle(e) {
+    let fillLineWidth = e.currentTarget.offsetWidth;
+    let leftOffset = e.offsetX;
+
+    if( (fillLineWidth / 2) < leftOffset ) {
+      this.movingType = 'max';
+    } else {
+      this.movingType = 'min';
+    }
+
+    this._onMove(e);
+  }
+
+  /**
+   * @method _onMoveOutsideRange
+   * @description bound to mousemove event on this element.  Update min/max
+   * values based on mouse position, but only if the mouse is outside the current
+   * min/max range
+   * @param {MouseEvent} e
+   */
+  _onMoveOutsideRange(e) {
+    let fillLineWidth = e.currentTarget.offsetWidth;
+    let leftOffset = e.offsetX;
+
+    if( (fillLineWidth / 2) < leftOffset ) {
+      this.movingType = 'max';
+    } else {
+      this.movingType = 'min';
+    }
+
+    this._onMove(e);
+  }
+
+  /**
+   * @method _onMoveStop
+   * @description 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
+   */
+  _onMoveStop() {
+    if (!this.isMoving) return;
+
+    this.movingType = '';
+    this.movingMin = false;
+    this.movingMax = false;
+    this.isMoving = false;
+
+    this._onRangeSliderChange();
+
+    this.hasRendered = false;
+    this.requestUpdate();
+    this._notifySelected();
+  }
+}
+
+customElements.define('ucdlib-range-slider', UcdlibRangeSlider);

package/ucdlib/ucdlib-range-slider/ucdlib-range-slider.tpl.js

@@ -0,0 +1,211 @@
+import { html } from 'lit';
+
+export default function render() {
+  return html`
+
+
+<style>
+  :host {
+    display: block;
+  }
+
+  [hidden] { display: none !important; }
+
+  .labels {
+    display: flex;
+    color: var(--gray-text, #666);
+    font-size: .92rem;
+    padding-top: 9px;
+  }
+
+  .inputs {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    padding: 1rem 0 .5rem
+  }
+
+  input[type="number"] {
+    border: 0;
+    width: 6rem;
+    height: 61px;
+    padding: 0 1rem;
+    margin: 0 0.5rem;
+    font-size: var(--fs-sm);
+    background: var(--color-aggie-blue-30);
+    color: var(--color-aggie-blue-80, #13639E);
+    text-align: center;
+
+    /* remove default styles for chrome/safari/ff */
+    -webkit-appearance: none;
+    -moz-appearance: textfield;
+  }
+
+  /* remove spinner button for chrome/safari */
+  input[type="number"]::-webkit-inner-spin-button,
+  input[type="number"]::-webkit-outer-spin-button {
+      -webkit-appearance: none;
+      margin: 0;
+  }
+
+  .unknown {
+    display: flex;
+    align-items: center;
+    padding-top: .5rem;
+  }
+
+  label {
+    padding-left: 5px;
+  }
+
+  range-slider {
+    --light-background-color: var(--medium-background-color);
+  }
+
+  #minInput {
+    margin-left: 0;
+  }
+
+  input[type="checkbox"] {
+    height: 1rem;
+    width: 1rem;
+    margin-left: 0;
+  }
+
+  #histogram {
+    /* padding-top: 1.78rem; */
+    height: 100px;
+    width: 100%;
+  }
+
+  .bin {
+    fill: var(--color-aggie-blue-80);
+  }
+
+  .slider {
+    display: block;
+    position: relative;
+    height: 20px;
+    top: -22px;
+    /* margin: 0 13px; */
+
+    -webkit-touch-callout: none; /* iOS Safari */
+    -webkit-user-select: none; /* Safari */
+    -khtml-user-select: none; /* Konqueror HTML */
+    -moz-user-select: none; /* Firefox */
+    -ms-user-select: none; /* Internet Explorer/Edge */
+    user-select: none; /* Non-prefixed version, currently */
+  }
+
+  #numberLine {
+    position: absolute;
+    left : 0;
+    right : 0;
+    height: 3px;
+    background-color: ${this.lightColor};
+
+    border-top: 5px solid white;
+    border-bottom: 5px solid white;
+  }
+
+  #fillLine {
+    position: absolute;
+    cursor: move;
+    background-color: ${this.darkColor};
+    height: 3px;
+
+    border-top: 5px solid white;
+    border-bottom: 5px solid white;
+  }
+
+  #numberLine {
+    cursor: move;
+  }
+
+  .btn {
+    position: absolute;
+    height: 25px;
+    width: 25px;
+    cursor: move;
+  }
+
+  .btn > div {
+    margin: 5px;
+    height: 15px;
+    width: 15px;
+    border-radius: 15px;
+    background-color: ${this.darkColor};
+    transition: all 150ms linear;
+  }
+
+  .btn[moving] > div {
+    margin: 0px;
+    height: 25px;
+    width: 25px;
+    border-radius: 25px;
+  }
+
+  .label {
+    width : 25px;
+    font-size: 12px;
+    position: absolute;
+    text-align: center;
+    transform: scale(0);
+    transition: transform 200ms linear;
+    color: var(--default-primary-color);
+  }
+</style>
+
+<svg ?hidden="${this.hideHistogram}" id="histogram"></svg>
+
+<div class="slider">
+  <div id="numberLine"
+    prop="outside-range"
+    @mousedown="${this._onMoveStart}"
+    @touchstart="${this._onMoveStart}">
+  </div>
+
+  <div id="fillLine"
+    prop="range"
+    @mousedown="${this._onMoveStart}"
+    @touchstart="${this._onMoveStart}">
+  </div>
+
+  <div id="lowNumberLabel" class="label" ?moving="${this.isMoving}">${this.minLabel}</div>
+  <div id="highNumberLabel" class="label" ?moving="${this.isMoving}">${this.maxLabel}</div>
+
+  <div id="lowNumberBtn"
+    class="btn"
+    prop="min"
+    @mousedown="${this._onMoveStart}"
+    @touchstart="${this._onMoveStart}"
+    ?moving="${this.movingMin}" >
+    <div></div>
+  </div>
+
+  <div id="highNumberBtn"
+    class="btn"
+    prop="max"
+    @mousedown="${this._onMoveStart}"
+    @touchstart="${this._onMoveStart}"
+    ?moving="${this.movingMax}">
+    <div></div>
+  </div>
+</div>
+
+<div ?hidden="${this.hideSliderLabels}" class="labels">
+  <div style="flex:1">${this.absMin}</div>
+  <div>${this.absMax}</div>
+</div>
+
+<div class="inputs">
+  <input id="minInput" .value="${this.min}" type="number" @change="${this._onInputChange}" min="${this.absMin}" max="${this.max}">
+  <span> - </span>
+  <input id="maxInput" .value="${this.max}" type="number" @change="${this._onInputChange}" min="${this.min}" max="${this.absMax}">
+</div>
+
+<div class="unknown" ?hidden="${this.showUnknown}">
+  <input type="checkbox" id="unknown" @click="${this._onRangeNullChange}" checked />
+  <label for="unknown">Include unknown/unspecified</label>
+</div>
+`;}