<div id="example"><div data-reactid=".0"><div class="timeline-wrapper" data-reactid=".0.0"><div class="timeline-available" data-reactid=".0.0.0"><div class="time-block" style="width:97.36842105263158px;" data-reactid=".0.0.0.$year-1989"><span class="time-block--year time-block--active" data-reactid=".0.0.0.$year-1989.0">1989</span></div><div class="time-block" style="width:97.36842105263158px;" data-reactid=".0.0.0.$year-1990"><span class="time-block--year time-block--in-range" data-reactid=".0.0.0.$year-1990.0">1990</span></div><div class="time-block" style="width:97.36842105263158px;" data-reactid=".0.0.0.$year-1991"><span class="time-block--year time-block--in-range" data-reactid=".0.0.0.$year-1991.0">1991</span></div><div class="time-block" style="width:97.36842105263158px;" data-reactid=".0.0.0.$year-1992"><span class="time-block--year time-block--in-range" data-reactid=".0.0.0.$year-1992.0">1992</span></div><div class="time-block" style="width:97.36842105263158px;" data-reactid=".0.0.0.$year-1993"><span class="time-block--year time-block--in-range" data-reactid=".0.0.0.$year-1993.0">1993</span></div><div class="time-block" style="width:97.36842105263158px;" data-reactid=".0.0.0.$year-1994"><span class="time-block--year time-block--in-range" data-reactid=".0.0.0.$year-1994.0">1994</span></div><div class="time-block" style="width:97.36842105263158px;" data-reactid=".0.0.0.$year-1995"><span class="time-block--year time-block--in-range" data-reactid=".0.0.0.$year-1995.0">1995</span></div><div class="time-block" style="width:97.36842105263158px;" data-reactid=".0.0.0.$year-1996"><span class="time-block--year time-block--in-range" data-reactid=".0.0.0.$year-1996.0">1996</span></div><div class="time-block" style="width:97.36842105263158px;" data-reactid=".0.0.0.$year-1997"><span class="time-block--year time-block--in-range" data-reactid=".0.0.0.$year-1997.0">1997</span></div><div class="time-block" style="width:97.36842105263158px;" data-reactid=".0.0.0.$year-1998"><span class="time-block--year time-block--in-range" data-reactid=".0.0.0.$year-1998.0">1998</span></div><div class="time-block" style="width:97.36842105263158px;" data-reactid=".0.0.0.$year-1999"><span class="time-block--year time-block--active" data-reactid=".0.0.0.$year-1999.0">1999</span></div><div class="time-block" style="width:97.36842105263158px;" data-reactid=".0.0.0.$year-2000"><span class="time-block--year" data-reactid=".0.0.0.$year-2000.0">2000</span></div><div class="time-block" style="width:97.36842105263158px;" data-reactid=".0.0.0.$year-2001"><span class="time-block--year" data-reactid=".0.0.0.$year-2001.0">2001</span></div><div class="time-block" style="width:97.36842105263158px;" data-reactid=".0.0.0.$year-2002"><span class="time-block--year" data-reactid=".0.0.0.$year-2002.0">2002</span></div><div class="time-block" style="width:97.36842105263158px;" data-reactid=".0.0.0.$year-2003"><span class="time-block--year" data-reactid=".0.0.0.$year-2003.0">2003</span></div><div class="time-block" style="width:97.36842105263158px;" data-reactid=".0.0.0.$year-2004"><span class="time-block--year" data-reactid=".0.0.0.$year-2004.0">2004</span></div><div class="time-block" style="width:97.36842105263158px;" data-reactid=".0.0.0.$year-2005"><span class="time-block--year" data-reactid=".0.0.0.$year-2005.0">2005</span></div><div class="time-block" style="width:97.36842105263158px;" data-reactid=".0.0.0.$year-2006"><span class="time-block--year" data-reactid=".0.0.0.$year-2006.0">2006</span></div><div class="time-block" style="width:97.36842105263158px;" data-reactid=".0.0.0.$year-2007"><span class="time-block--year" data-reactid=".0.0.0.$year-2007.0">2007</span></div><div class="time-block" style="width:97.36842105263158px;" data-reactid=".0.0.0.$year-2008"><span class="time-block--year" data-reactid=".0.0.0.$year-2008.0">2008</span></div></div><div class="timeline-range" style="transform: translate3d(0px, 0px, 0px); width: 1048.68px;" data-reactid=".0.0.1"></div><div class="time-cursor time-cursor--min cursor-arrow" style="transform:translate3d(0px,0,0);width:75px;" data-reactid=".0.0.2">1989</div><div class="time-cursor time-cursor--max cursor-arrow" style="transform: translate3d(973.684px, 0px, 0px); width: 75px;" data-reactid=".0.0.3">1999</div></div></div></div>CSS:
.timeline-wrapper {line-height: 1;width: 100%;height: 50px;overflow: hidden;background-color: #F6F6F6;position: relative;border-radius: 5px;color: #ccc;user-select: none;-moz-user-select: none;-webkit-user-select: none;-ms-user-select: none; }
.timeline-wrapper.timeline--disabled { cursor: not-allowed; }
.timeline-wrapper.timeline--disabled .timeline-range {background-color: #cbe4f3;cursor: not-allowed; }
.timeline-wrapper.timeline--disabled .time-cursor {background-color: #66b5e2;cursor: not-allowed; }
.timeline-wrapper.timeline--disabled .cursor-arrow:after {border-right-color: #66b5e2; }
.timeline-wrapper.timeline--disabled .cursor-arrow:before {border-left-color: #66b5e2; }
.timeline-wrapper.timeline--disabled .time-block--year {cursor: not-allowed; }
.timeline-available {height: inherit;display: inline-flex;position: absolute;user-select: none;z-index: 1; }
.time-block {width: 200px;float: left;padding: 18px 0 0 0;user-select: none;-moz-user-select: none;-webkit-user-select: none;-ms-user-select: none;text-align: center;font-size: smaller; }
.timeline-range {height: inherit;background-color: #8DC3E4;position: absolute;border-radius: inherit;user-select: none;-moz-user-select: none;-webkit-user-select: none;-ms-user-select: none;box-sizing: border-box;overflow: hidden; }
.time-block--year {transition: opacity 500ms ease, color 500ms ease;cursor: pointer; }
.time-block--in-range {color: #fff; }
.time-block--active {opacity: 0; }
.time-cursor {position: absolute;top: 0;width: 100px;height: inherit;padding: 18px 0 15px 0;background-color: #2895D4;border-radius: inherit;text-align: center;cursor: ew-resize;color: #fff;user-select: none;-moz-user-select: none;-webkit-user-select: none;-ms-user-select: none;font-weight: 300;box-sizing: border-box;z-index: 2; }
.timeline-animate {-webkit-transition: all 250ms ease;-moz-transition: all 250ms ease;-o-transition: all 250ms ease;transition: all 250ms ease; }
.time-cursor--min.cursor-arrow:before {content: '';position: absolute;top: 0;left: 97%;width: 0;height: 0;border: 25px solid transparent;border-left: 12px solid #2895D4; }
.time-cursor--max.cursor-arrow:after {content: '';position: absolute;top: 0;right: 97%;width: 0;height: 0;border: 25px solid transparent;border-right: 12px solid #2895D4; }