JSFiddle - React, Tailwind, and code Playground

by Victor

HTML

<div class="selector">
    <a class="downSize" href="#" >down</a>
    <div class="viewSize">
	<ul class="col-1-1">
			<li>1/2</li>
			<li>3/4</li>
			<li>1</li>
			<li>1.25</li>
			<li>1.5</li>
			<li>2</li>
			<li>2.5</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
			<li>6</li>
			<li>8</li>
			<li>10</li>
			<li>12</li>
			<li>14</li>
			<li>16</li>
			<li>18</li>
			<li>20</li>
			<li>24</li>
			<li>26</li>
			<li>28</li>
			<li>30</li>
			<li>32</li>
			<li>36</li>
			<li>42</li>
		</ul>
    </div>
    <a href="#" class="upSize">up</a>
</div>

CSS

.selector {
    padding:10px;
    background: #e3e3e3;
    width:300px;
    position:relative;
}
.downSize {
    float:left;
    display:inline-block;
    padding:0;
    margin:0;
    position:absolute;
    left:10px;
    top:10px;
}
.upSize {
    float:right;
    display:inline-block;
    padding:0;
    margin:0;
    position:absolute;
    right:10px;
    top:10px;
}
.viewSize {
    background: white;
    padding:0px;
    width:100px;
    /* overflow:hidden; */
    margin:0 auto;
    position:relative;
    height:20px;
}
.viewSize ul {
    padding:0;
    margin:0 auto;
    width:2500px;
    position:absolute;
    top:0;
    left:0;
}
.viewSize ul li {
    display:inline-block;
    float:left;
    width:100px;
    margin:0;
    padding:0;
    text-align: center;
}

JavaScript

var list = $('.viewSize ul');
$('.upSize').click(function(){
    var pos = list.css('left');
        if (parseInt(pos) !== 2300) {
            list.animate({"left": (parseInt(pos) - 100) +"px"}, 200);
        };
});
$('.downSize').click(function(){
    var pos = list.css('left');
    if (parseInt(pos) !== 0) {
            list.animate({"left": (parseInt(pos) + 100) +"px"}, 200);
    };
});