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.


  • 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

Must Read: jQuery Plugin To Display Scroll Reading Progress Indicator

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 -->


Must Read: Bootstrap 5 spinner/loading/pending indicator Form Controls | Input Spinner

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


Must Read: Animated Stacked Bars Percentage Indicator jQuery Plugin | StackBars

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


Must Read: Pure CSS Single Element Inline Loading Indicators | text-spinners

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.
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 an 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 the ngAfterContentInit hook.

See Also –

Vue Button With Slideout Loading Indicator Library
Notiflix Notification, Popup Boxes, Loading Indicators, and More in JavaScript Library
Illustrator Like Grid Guides & Breakpoint Indicator For Bootstrap

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.

Related Posts


[Animation] Bootstrap Multi-Level Responsive Dropdown Menu

Bootstrap-based multi-level dropdown navigation menu with cool animations. The dropdown on Hover is a jQuery plugin used to create Bootstrap multi-level scroll-triggered dropdown menus with CSS3 animations…


HTML 5 File Input Optimized for Bootstrap 4.x./3.x with File Preview | Bootstrap Fileinput

bootstrap-fileinput is an improved HTML 5 file input  Bootstrap 5.x, 4.x and 3.x with file preview for different files, provides multiple selections, resumable section uploads, and more….


Interactive Data Table Generator with JS/jQuery and JSON | Tabulator

Tabulator allows you to create interactive tables in seconds from any HTML Table, JavaScript array, AJAX data source, or JSON format data. Just include the library in your…


Simple Alert, Confirm, Prompt Popup Using Vanilla JavaScript Library | attention.js

JavaScript provides various built-in functionality to display popup messages for different purposes. Attention JS is a vanillaJS plugin used to create a custom alert, confirm, or Prompt…


Lightweight Bootstrap 4 Toast Notification Plugin | BS4 Advanced Toast

A lightweight Bootstrap 4 Toast Notification plugin integrated with JS/jQuery. bs4-toast.js is a JavaScript library that enhances the native Bootstrap toast component with icons, buttons, callbacks, and…


How to Create Audio Visualizations with JavaScript | Wave.js

Audio Visualizer Library – wave.js is a vanilla javascript audio visualization library that provides 20+ creative audio visualization effects to bring more engagement to your visitor. Contribute…

Leave a Reply

Your email address will not be published. Required fields are marked *