JSFiddle - React, Tailwind, and code Playground

by nicolas_canfrere

HTML

<div id="flat-slider" class="flat-slider" data-min = "-3000" data-max="10000"><div class="zerobar"></div></div>

CSS

.flat-slider{
  width: 500px;
  height: 2px;
  background-color: #ff0000;
  margin: 20px;
  position: relative;
}
.zerobar {
    position: absolute;
   display: none;
    width: 2px;
    height: 8px;
    top: -3px;
    background-color: #ff0000;
}

JavaScript

$('.test').css("color", "red");
var max = parseInt($('#flat-slider').attr('data-max'));
var min = parseInt($('#flat-slider').attr('data-min'));

var sliderWidth = $('.flat-slider').width();
var zerobar =  $('.zerobar');
if (min < 0 && max > 0 ) { // parce que sinon aucun interêt
//attention peut être des arrondis à prévoir
   var unit = sliderWidth / ( max + Math.abs(min)); 
   zerobar.show();
   var zerobarX = (unit * Math.abs(min)) - (zerobar.width() / 2);
  zerobar.css({ left: zerobarX + "px" });
}