Slider Indicator To Show First Character of The Item | ngx-scrollbar-indicator

ngx scrollbar indicator is one of the angular components to add a cursor to a scrollbar that shows the first letter of an item in a large list.

vertical scroll indicator css, page scroll progress bar, vertical scroll progress bar


  • Use semantic-release
  • Compatibilities with dates, like a timeline
  • Show the custom number of characters in the indicator
  • Add an example with Angular Material
  • Add more examples with bootstrap

How to make use of it:

1. Install and import the ngx slider indicator module.

$ npm install ngx-scrollbar-indicator --save
import { NgxScrollbarIndicatorModule } from 'ngx-scrollbar-indicator';
  imports: [

2. Create ngx slider indicator component in your template.

<ngx-scrollbar-indicator #indicatorRef>
  <!-- Element Here -->


enablebooleanEnable or disable the indicator. Default: true
changeWhen deprecatedEChangeWhen (top/visible)When the indicator should change the character? When a character has reached the top of the container or as soon as it becomes visible in the container. Default :
containerHeightnumberheight of the container, without this, scrolling won’t work. Default: 500
themeETheme (circular/waterDrop/squareLike)The visual theme of the indicator is totally based on scss. Default : ETheme.waterDrop
position deprecatedEPosition (auto/top)Position of indicator, whether to show on top or auto. Default :
showWhenEShowWhen (always/scroll)When to show the indicator, always or onscroll/onhover. Default : EShowWhen.scroll


allScrollbarIndicatorItemDirective[]All Items Array
firsts{ [x: string]: ScrollbarIndicatorItemDirective }JSON Object with the first item of each character
lasts{ [x: string]: ScrollbarIndicatorItemDirective }JSON Object with the last item of each character


showIndicator– timer, this will help to maintain frequent calls to this function
– duration (default 500), after which the indicator will be hidden
Timer, which can be cleared if you are calling this function again within the duration.Ideally, you shouldn’t call this. This will show the indicator. This will add a ‘show’ class to the indicator. And After duration(default 500), it will remove the same. Calling this won’t make any sense if show when is set to show when.
goToLetter– letter, Character to which viewport should be scrolled
– position (default ‘first’) Element of that character group, first or last
offsetTop of element or -1 if errorScroll to a specific letter, positioned first or last. Returns the offsetTop if element found, else -1. Works only in Non-IE Browsers.
startCalculationnonevoidCall this only if you are changing options in the run-time. This will calculate arrays and characters, based on options. This is called once after ngAfterContentInit hook.

Scrollbar Indicator To Show The First Character Of The Item In A Large List, ngx-scrollbar-indicator

See Demo And Download

Official Website(shhdharmen): Click Here

This superior jQuery/javascript plugin is developed by shhdharmen. For extra Advanced usage, please go to the official website.