helgoland-toolbox documentation
  1. Components
  2. TimeRangeSliderComponent

File

libs/time-range-slider/src/lib/time-range-slider.component.ts

Implements

OnChanges

Metadata

encapsulation ViewEncapsulation.None
selector n52-time-range-slider
styleUrls ./time-range-slider.component.scss,
../../../../node_modules/bootstrap-slider/dist/css/bootstrap-slider.min.css
templateUrl ./time-range-slider.component.html

Index

Properties
Methods
Inputs
Outputs

Constructor

constructor(cache: TimeRangeSliderCache)
Defined in libs/time-range-slider/src/lib/time-range-slider.component.ts:33
Parameters :
Name Type Optional
cache TimeRangeSliderCache No

Inputs

id
Default value : ''
Defined in libs/time-range-slider/src/lib/time-range-slider.component.ts:22
timeList
Type : number[]
Defined in libs/time-range-slider/src/lib/time-range-slider.component.ts:25

Outputs

onTimespanSelected
Type : EventEmitter<Timespan>
Defined in libs/time-range-slider/src/lib/time-range-slider.component.ts:28

Methods

Public ngOnChanges
ngOnChanges(changes: SimpleChanges)
Defined in libs/time-range-slider/src/lib/time-range-slider.component.ts:39
Parameters :
Name Type Optional
changes SimpleChanges No
Returns : void

Properties

Public end
Type : number
Defined in libs/time-range-slider/src/lib/time-range-slider.component.ts:32
Public selectionEnd
Type : number
Defined in libs/time-range-slider/src/lib/time-range-slider.component.ts:33
Public selectionStart
Type : number
Defined in libs/time-range-slider/src/lib/time-range-slider.component.ts:31
Public start
Type : number
Defined in libs/time-range-slider/src/lib/time-range-slider.component.ts:30
 
import 'bootstrap-slider';

import { Component, EventEmitter, Input, OnChanges, Output, SimpleChanges, ViewEncapsulation } from '@angular/core';
import { Timespan } from '@helgoland/core';

import { TimeRangeSliderCache } from './time-range-slider.service';

import jquery from 'jquery';

@Component({
  selector: 'n52-time-range-slider',
  templateUrl: './time-range-slider.component.html',
  styleUrls: [
    './time-range-slider.component.scss',
    '../../../../node_modules/bootstrap-slider/dist/css/bootstrap-slider.min.css'
  ],
  encapsulation: ViewEncapsulation.None
})
export class TimeRangeSliderComponent implements OnChanges {

  @Input()
  public id = '';

  @Input()
  public timeList: number[];

  @Output()
  public onTimespanSelected: EventEmitter<Timespan> = new EventEmitter();

  public start: number;
  public selectionStart: number;
  public end: number;
  public selectionEnd: number;

  constructor(
    protected cache: TimeRangeSliderCache
  ) { }

  public ngOnChanges(changes: SimpleChanges): void {
    if (changes.timeList && this.timeList) {
      let min; let max;
      this.start = min = this.timeList[0];
      this.end = max = this.timeList[this.timeList.length - 1];
      if (this.id && this.cache.has(this.id)) {
        this.selectionStart = this.cache.get(this.id).from;
        this.selectionEnd = this.cache.get(this.id).to;
      } else {
        this.selectionStart = this.start;
        this.selectionEnd = this.end;
      }
      jquery('#slider').slider({
        tooltip: 'hide',
        min,
        max,
        value: [this.selectionStart, this.selectionEnd]
      }).on('slideStop', (event: any) => {
        const timespan: Timespan = new Timespan(event.value[0], event.value[1]);
        this.cache.set(this.id, timespan);
        this.onTimespanSelected.emit(timespan);
      }).on('slide', (event: any) => {
        this.selectionStart = event.value[0];
        this.selectionEnd = event.value[1];
      });
    }
  }
}

<div class="time-range-slider" [hidden]="!timeList">
  <div class="slider-container">
    <div class="left-start">
      <span>{{start | tzDate : 'L LT z'}}</span>
    </div>
    <div class="center">
      <input id="slider" type="text" />
    </div>
    <div class="right-end">
      <span>{{end | tzDate : 'L LT z'}}</span>
    </div>
  </div>
  <div class="selection" *ngIf="selectionStart">
    <span>{{selectionStart | tzDate : 'L LT z'}}</span>
    <span> - </span>
    <span>{{selectionEnd | tzDate : 'L LT z'}}</span>
  </div>
</div>

./time-range-slider.component.scss 

n52-time-range-slider-selector {
    .time-range-slider {
        width: 100%;
        .slider-container {
            display: flex;
            display: -webkit-flex;
        }
        .left-start,
        .right-end {
            width: 150px;
            padding: 0 15px;
        }
        .left-start {
            text-align: right;
        }
        .center {
            -webkit-flex: 1;
            flex: 1;
            .slider {
                width: 100%;
            }
        }
        .selection {
            text-align: center;
        }
    }
}

../../../../node_modules/bootstrap-slider/dist/css/bootstrap-slider.min.css 

/*! =======================================================
                      VERSION  10.6.2              
========================================================= */
/*! =========================================================
 * bootstrap-slider.js
 *
 * Maintainers:
 *		Kyle Kemp
 *			- Twitter: @seiyria
 *			- Github:  seiyria
 *		Rohit Kalkur
 *			- Twitter: @Rovolutionary
 *			- Github:  rovolution
 *
 * =========================================================
  *
 * bootstrap-slider is released under the MIT License
 * Copyright (c) 2019 Kyle Kemp, Rohit Kalkur, and contributors
 * 
 * Permission is hereby granted, free of charge, to any person
 * obtaining a copy of this software and associated documentation
 * files (the "Software"), to deal in the Software without
 * restriction, including without limitation the rights to use,
 * copy, modify, merge, publish, distribute, sublicense, and/or sell
 * copies of the Software, and to permit persons to whom the
 * Software is furnished to do so, subject to the following
 * conditions:
 * 
 * The above copyright notice and this permission notice shall be
 * included in all copies or substantial portions of the Software.
 * 
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
 * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
 * OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
 * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
 * HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
 * WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
 * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
 * OTHER DEALINGS IN THE SOFTWARE.
 *
 * ========================================================= */.slider{display:inline-block;vertical-align:middle;position:relative}.slider.slider-horizontal{width:210px;height:20px}.slider.slider-horizontal .slider-track{height:10px;width:100%;margin-top:-5px;top:50%;left:0}.slider.slider-horizontal .slider-selection,.slider.slider-horizontal .slider-track-low,.slider.slider-horizontal .slider-track-high{height:100%;top:0;bottom:0}.slider.slider-horizontal .slider-tick,.slider.slider-horizontal .slider-handle{margin-left:-10px}.slider.slider-horizontal .slider-tick.triangle,.slider.slider-horizontal .slider-handle.triangle{position:relative;top:50%;-ms-transform:translateY(-50%);transform:translateY(-50%);border-width:0 10px 10px 10px;width:0;height:0;border-bottom-color:#2e6da4;margin-top:0}.slider.slider-horizontal .slider-tick-container{white-space:nowrap;position:absolute;top:0;left:0;width:100%}.slider.slider-horizontal .slider-tick-label-container{white-space:nowrap;margin-top:20px}.slider.slider-horizontal .slider-tick-label-container .slider-tick-label{padding-top:4px;display:inline-block;text-align:center}.slider.slider-horizontal .tooltip{-ms-transform:translateX(-50%);transform:translateX(-50%)}.slider.slider-horizontal.slider-rtl .slider-track{left:initial;right:0}.slider.slider-horizontal.slider-rtl .slider-tick,.slider.slider-horizontal.slider-rtl .slider-handle{margin-left:initial;margin-right:-10px}.slider.slider-horizontal.slider-rtl .slider-tick-container{left:initial;right:0}.slider.slider-horizontal.slider-rtl .tooltip{-ms-transform:translateX(50%);transform:translateX(50%)}.slider.slider-vertical{height:210px;width:20px}.slider.slider-vertical .slider-track{width:10px;height:100%;left:25%;top:0}.slider.slider-vertical .slider-selection{width:100%;left:0;top:0;bottom:0}.slider.slider-vertical .slider-track-low,.slider.slider-vertical .slider-track-high{width:100%;left:0;right:0}.slider.slider-vertical .slider-tick,.slider.slider-vertical .slider-handle{margin-top:-10px}.slider.slider-vertical .slider-tick.triangle,.slider.slider-vertical .slider-handle.triangle{border-width:10px 0 10px 10px;width:1px;height:1px;border-left-color:#2e6da4;border-right-color:#2e6da4;margin-left:0;margin-right:0}.slider.slider-vertical .slider-tick-label-container{white-space:nowrap}.slider.slider-vertical .slider-tick-label-container .slider-tick-label{padding-left:4px}.slider.slider-vertical .tooltip{-ms-transform:translateY(-50%);transform:translateY(-50%)}.slider.slider-vertical.slider-rtl .slider-track{left:initial;right:25%}.slider.slider-vertical.slider-rtl .slider-selection{left:initial;right:0}.slider.slider-vertical.slider-rtl .slider-tick.triangle,.slider.slider-vertical.slider-rtl .slider-handle.triangle{border-width:10px 10px 10px 0}.slider.slider-vertical.slider-rtl .slider-tick-label-container .slider-tick-label{padding-left:initial;padding-right:4px}.slider.slider-disabled .slider-handle{background-image:-webkit-linear-gradient(top,#dfdfdf 0,#bebebe 100%);background-image:-o-linear-gradient(top,#dfdfdf 0,#bebebe 100%);background-image:linear-gradient(to bottom,#dfdfdf 0,#bebebe 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffdfdfdf',endColorstr='#ffbebebe',GradientType=0);background-repeat:repeat-x}.slider.slider-disabled .slider-track{background-image:-webkit-linear-gradient(top,#e5e5e5 0,#e9e9e9 100%);background-image:-o-linear-gradient(top,#e5e5e5 0,#e9e9e9 100%);background-image:linear-gradient(to bottom,#e5e5e5 0,#e9e9e9 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffe5e5e5',endColorstr='#ffe9e9e9',GradientType=0);background-repeat:repeat-x;cursor:not-allowed}.slider input{display:none}.slider .tooltip{pointer-events:none}.slider .tooltip.top{margin-top:-36px}.slider .tooltip-inner{white-space:nowrap;max-width:none}.slider .hide{display:none}.slider-track{position:absolute;cursor:pointer;background-image:-webkit-linear-gradient(top,#f5f5f5 0,#f9f9f9 100%);background-image:-o-linear-gradient(top,#f5f5f5 0,#f9f9f9 100%);background-image:linear-gradient(to bottom,#f5f5f5 0,#f9f9f9 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff5f5f5',endColorstr='#fff9f9f9',GradientType=0);background-repeat:repeat-x;-webkit-box-shadow:inset 0 1px 2px rgba(0,0,0,0.1);box-shadow:inset 0 1px 2px rgba(0,0,0,0.1);border-radius:4px}.slider-selection{position:absolute;background-image:-webkit-linear-gradient(top,#f9f9f9 0,#f5f5f5 100%);background-image:-o-linear-gradient(top,#f9f9f9 0,#f5f5f5 100%);background-image:linear-gradient(to bottom,#f9f9f9 0,#f5f5f5 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff9f9f9',endColorstr='#fff5f5f5',GradientType=0);background-repeat:repeat-x;-webkit-box-shadow:inset 0 -1px 0 rgba(0,0,0,0.15);box-shadow:inset 0 -1px 0 rgba(0,0,0,0.15);-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;border-radius:4px}.slider-selection.tick-slider-selection{background-image:-webkit-linear-gradient(top,#8ac1ef 0,#82b3de 100%);background-image:-o-linear-gradient(top,#8ac1ef 0,#82b3de 100%);background-image:linear-gradient(to bottom,#8ac1ef 0,#82b3de 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff8ac1ef',endColorstr='#ff82b3de',GradientType=0);background-repeat:repeat-x}.slider-track-low,.slider-track-high{position:absolute;background:transparent;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;border-radius:4px}.slider-handle{position:absolute;top:0;width:20px;height:20px;background-color:#337ab7;background-image:-webkit-linear-gradient(top,#337ab7 0,#2e6da4 100%);background-image:-o-linear-gradient(top,#337ab7 0,#2e6da4 100%);background-image:linear-gradient(to bottom,#337ab7 0,#2e6da4 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff337ab7',endColorstr='#ff2e6da4',GradientType=0);background-repeat:repeat-x;filter:none;-webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 1px 2px rgba(0,0,0,.05);box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 1px 2px rgba(0,0,0,.05);border:0 solid transparent}.slider-handle:hover{cursor:pointer}.slider-handle.round{border-radius:50%}.slider-handle.triangle{background:transparent none}.slider-handle.custom{background:transparent none}.slider-handle.custom::before{line-height:20px;font-size:20px;content:'\2605';color:#726204}.slider-tick{position:absolute;cursor:pointer;width:20px;height:20px;background-image:-webkit-linear-gradient(top,#f9f9f9 0,#f5f5f5 100%);background-image:-o-linear-gradient(top,#f9f9f9 0,#f5f5f5 100%);background-image:linear-gradient(to bottom,#f9f9f9 0,#f5f5f5 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff9f9f9',endColorstr='#fff5f5f5',GradientType=0);background-repeat:repeat-x;-webkit-box-shadow:inset 0 -1px 0 rgba(0,0,0,0.15);box-shadow:inset 0 -1px 0 rgba(0,0,0,0.15);-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;filter:none;opacity:.8;border:0 solid transparent}.slider-tick.round{border-radius:50%}.slider-tick.triangle{background:transparent none}.slider-tick.custom{background:transparent none}.slider-tick.custom::before{line-height:20px;font-size:20px;content:'\2605';color:#726204}.slider-tick.in-selection{background-image:-webkit-linear-gradient(top,#8ac1ef 0,#82b3de 100%);background-image:-o-linear-gradient(top,#8ac1ef 0,#82b3de 100%);background-image:linear-gradient(to bottom,#8ac1ef 0,#82b3de 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff8ac1ef',endColorstr='#ff82b3de',GradientType=0);background-repeat:repeat-x;opacity:1}
Legend
Html element
Component
Html element with directive

result-matching ""

    No results matching ""