Brewer Map Range Slider

Wrapper component for ng5-slider implementing Angular Material theming

Setup

import { RangeSliderModule } from '@brewermap/range-slider';
 
@NgModule({
  imports: [
    CommonModule,
    RangeSliderModule
  ]
})

Usage

With Reactive Forms is important to include the ngDefaultControl

import { FormGroup, FormControl } from '@angular/forms';
...
public filterForm = new FormGroup({
    betaAcids: new FormControl([0, 16])
  });
...

<bm-range-slider
    formControlName="betaAcids"
    ngDefaultControl
    [value]="0" 
    [highValue]="15" 
    [options]="{
        floor: 0,
        ceil: 25,
        animate: true,
        hideLimitLabels: true,
        hidePointerLabels: true
    }">
</bm-range-slider>

Theming

Just have to import the mixin into the main styles for your app

@import "~@angular/material/theming";
@import "~@brewermap/theming/bm";

$bm-hops-primary: mat-palette($bm-hop);
$bm-hops-accent: mat-palette($bm-chocolate, 800);
$bm-hops-warn: mat-palette($bm-amber);

$bm-hops-theme: mat-light-theme(
  (
    color: (
      primary: $bm-hops-primary,
      accent: $bm-hops-accent,
      warn: $bm-hops-warn,
    ),
  )
);

@include angular-material-theme($bm-hops-theme);

@import '@brewermap/range-slider/src/lib/range-slider.theme.scss';
@include range-slider-component-theme($bm-hops-theme);

This library was generated with Angular CLI version 10.0.2.