diff --git a/src/controllers/playback/video/index.js b/src/controllers/playback/video/index.js
index baaec52ff2..379369c64b 100644
--- a/src/controllers/playback/video/index.js
+++ b/src/controllers/playback/video/index.js
@@ -1574,12 +1574,13 @@ import { setBackdropTransparency, TRANSPARENCY_LEVEL } from '../../../components
             return '<h1 class="sliderBubbleText">' + datetime.getDisplayRunningTime(ticks) + '</h1>';
         };
 
-        nowPlayingPositionSlider.getChapterFractions = function () {
+        nowPlayingPositionSlider.getChapterNamesAndFractions = function () {
             showOsd();
 
             const item = currentItem;
 
             if (item && item.Chapters && item.Chapters.length) {
+                const chapterNames = [];
                 const chapterFractions = [];
                 const runtimeDuration = item.RunTimeTicks;
 
@@ -1588,12 +1589,13 @@ import { setBackdropTransparency, TRANSPARENCY_LEVEL } from '../../../components
 
                     const fraction = currentChapter.StartPositionTicks / runtimeDuration;
                     chapterFractions.push(fraction);
+                    chapterNames.push(currentChapter.Name);
                 }
 
-                return chapterFractions;
+                return [chapterNames, chapterFractions];
             }
 
-            return [];
+            return [[], []];
         };
 
         view.querySelector('.btnPreviousTrack').addEventListener('click', function () {
diff --git a/src/elements/emby-slider/emby-slider.js b/src/elements/emby-slider/emby-slider.js
index 8af342deb9..3ade526569 100644
--- a/src/elements/emby-slider/emby-slider.js
+++ b/src/elements/emby-slider/emby-slider.js
@@ -173,15 +173,23 @@ import '../emby-input/emby-input';
     }
 
     function addChapterMarks(range) {
+        range.chapterNames = [];
         range.chapterFractions = [];
-        if (range.getChapterFractions) {
-            range.chapterFractions = range.getChapterFractions();
+        if (range.getChapterNamesAndFractions) {
+            [range.chapterNames, range.chapterFractions] = range.getChapterNamesAndFractions();
         }
 
-        const htmlToInsert = '<span class="material-icons sliderChapterMark" aria-hidden="true"></span>';
+        function htmlToInsert(chapterName) {
+            let classChapterName = '';
+            if (typeof chapterName === 'string' && chapterName.length) {
+                // limit the class length in case the name contains half a novel
+                classChapterName = `scm-${chapterName.substring(0, 100).toLowerCase().replace(' ', '-')}`;
+            }
+            return `<span class="material-icons sliderChapterMark ${classChapterName}" aria-hidden="true"></span>`;
+        }
 
-        range.chapterFractions.forEach(() => {
-            range.chapterMarkContainerElement.insertAdjacentHTML('beforeend', htmlToInsert);
+        range.chapterNames.forEach(chapterName => {
+            range.chapterMarkContainerElement.insertAdjacentHTML('beforeend', htmlToInsert(chapterName || ''));
         });
 
         range.chapterMarkElements = range.chapterMarkContainerElement.querySelectorAll('.sliderChapterMark');