JSFiddle - React, Tailwind, and code Playground

by Alan Doe

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.js"></script>
<div class="content" ng-app="myApp" ng-controller="c">

  <div class="sectionContainer" scroll-slide parent-container="sectionContent" main-container="contentSection" adjust-element="contentHolder">
  <div class="sectionHeader">
    <img src="https://demo-project-hutson.c9users.io/images/gamesIcon.png" class="sectionImage" />

    <p class="sectionHeading">Games</p>
  </div>

  <div class="sectionContent">



    <div class="contentSection">
      <div class="contentHolder">
        <div class="entry inline">1</div>
        <div class="entry inline">2</div>
        <div class="entry inline">3</div>
        <div class="entry inline">4</div>
        <div class="entry inline">5</div>
        <div class="entry inline">6</div>
      </div>
    </div>

    <span class="selectionSection selectedSection">popular</span>
    <span class="selectionSection normalSection">new</span>
    <span class="selectionSection normalSection">hot</span>

    <div class="right-float" style="background:white;width:150px;text-align:center;padding-right:8px;padding-left:8px;padding-bottom:10px;">
      <input type="range" class="slide" />
    </div>




  </div>


</div>


</div>

CSS

@font-face {
  font-family: ubuntu;
  src: url(https://demo-project-hutson.c9users.io/fonts/ubuntu.ttf);
}

* {
  font-family: ubuntu;
}

div,
span {
  box-sizing: border-box;
}

.light-shadow {
  box-shadow: 0 0 2px rgb(230, 230, 230);
}

.right-float {
  float: right;
}

.inline {
  display: inline-block;
}

.sectionContainer {
  width: 80%;
}

.sectionContent {
  padding-left: 60px;
}

.sectionHeader {
  padding-top: 32px;
  padding-left: 40px;
  position: relative;
}

.sectionHeading {
  color: white;
  font-size: 1.9em;
  background: deepskyblue;
  padding-top: 15px;
  padding-bottom: 15px;
  text-align: center;
  margin: 0;
}

.sectionImage {
  width: 80px;
  height: 80px;
  padding: 10px;
  background: deepskyblue;
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: 0;
}

.sectionSelection {
  vertical-align: top;
}

.selectionSection {
  text-align: center;
  padding: 5px 20px;
}

.selectedSection {
  background: white;
  color: deepskyblue;
}

.normalSection {
  color: white;
  background: deepskyblue;
}

.contentSection {
  background: white;
  padding: 16px;
  vertical-align: top;
  overflow: hidden;
}

.slide {}

input[type=range]::-ms-track {
  width: 100%;
  cursor: pointer;
  background: transparent;
  /* Hides the slider so custom styles can be added */
  border-color: transparent;
  color: transparent;
}

input[type=range] {
  -webkit-appearance: none;
  /* Hides the slider so that custom slider can be made */
  width: 100%;
  /* Specific width is required for Firefox. */
}

input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
}

input[type=range]:focus {
  outline: none;
  /* Removes the blue border. You should probably do some kind of focus styling for accessibility reasons though. */
}

input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  height: 30px;
  width: 30px;
  border-radius: 15px;
  background: white;
  box-shadow: 0 0 2px rgb(100, 100, 100);
  margin-top: -12px;
}


/* All the same stuff...

JavaScript

var mod = angular.module('myApp', ['slideScroll']);

mod.controller('c',function($scope){


});

angular.module('slideScroll', []).directive('scrollSlide', function() {

  return {

    restrict: 'A',
    scope: {},
    link: function(scope, elem, attr) {

			debugger;
      var parentContainer = elem.find(attr.parentContainer);

      var slide = elem.find('slide');

      var mainContainer = elem.find(attr.mainContainer);

      var elemAdjust = elem.find(attr.adjustElement);

      var containerWidth = mainContainer.width();

      var contentSize = parseFloat(mainContainer[0].scrollWidth, 10);



      if (containerWidth < contentSize) {

        slide.val(0);

        slide.on('input', function() {

          var val = slide.val() / 100;

          var dif = contentSize - containerWidth;

          var marginAdjustment = dif * val;

          marginAdjustment = Math.round(marginAdjustment.toFixed(0));

          elemAdjust.css('margin-left', -marginAdjustment + 'px');

        });
      } else {
        //hide slider
      }


    }


  };

});