<div class="reflowablesliderPanel" ng-show="toggleDisable()" ng-style="toggleReflowableSliderPanel()">
  <div class="chaptersWrapper" ng-show="showChapters">
    <div class="topBorder"></div>
    <div class="navigation">
      <button class="leftNavigation" ng-click="prevChapter()" ng-disabled="togglePrevChapter()"></button>
      <div class="chapterContents"  chapter-content ng-style="{left: chapterContentLeft + 'px',width: setWidth() + 'px'}">
        <div class="chapter" ng-repeat="chapter in BookOpts.chapters" id="{{'chapter_' + chapter.pageIndex}}" ng-click="navigateToChapter(chapter.pageIndex, chapter.columnId)" ng-class="{'selected':isCurrentChapter(chapter)}"><span>{{chapter.name}}</span></div>
      </div>      
      <button class="rightNavigation" ng-click="nextChapter()" ng-disabled="toggleNextChapter()"></button>
    </div>
    <div class="bottomBorder"></div>
  </div>
  <div class="sliderWrapper">
    <div class="chapterHeader" ng-click="toggleChapters()" ng-class="{'display':showChapters}"><span class= "name" bo-text="'chapter' | translate : 'labels'"> </span><span class="sub" ng-class="{'up':showChapters}"></span></div>
    <div  id="reflowableSlider" reflowable-slider style="-ms-touch-action: none" max="{{reflowableSliderService.max}}" value="{{reflowableSliderService.value}}" >
        <div class="progress">
          <div class="progress-bar" ng-style="{width: progresswidth + 'px'}"></div>
        </div>
        <!-- <div  ng-repeat='chapter in BookOpts.chapters' class="sliderpoint" ng-style="{left: setLeft(chapter.pageIndex) + '%'}"><div></div></div> -->
    </div>
    <div class="slider-max-val"><span ng-bind="showSliderValues()"></spna></div>
  </div>
</div>