JSFiddle - React, Tailwind, and code Playground

by yoowordpress

HTML

<link rel="stylesheet" href="http://www.eyecon.ro/bootstrap-slider/css/slider.css">
<script src="http://www.eyecon.ro/bootstrap-slider/js/bootstrap-slider.js"></script>
<div id="div">
    <img class="back" src="http://carbon.pro/00002.png"/>
    <div id="silder-low">
    <input type="text" value="" id="slider-hide"/>
    </div>
</div>

CSS

#div {
    background: url("http://carbon.pro/00001.jpg") repeat scroll 0 0 / 100% auto rgba(0, 0, 0, 0);
    position: relative;
    width: 100%;
}
.back {
    width: 100%;
}
.point {
    background-color: #72ff00;
    border-radius: 50%;
    height: 1px;
    position: absolute;
    width: 1px;
}
#silder-low {
    bottom: 25%;
    position: absolute;
    right: 25px;
    text-align: center;
    top: 25%;
    width: 25px;
}

JavaScript

$("#div").click(function(e) {
    var width_object = $(this).width(),
    height_object = $(this).height(),
    offset = $(this).offset(),
    one_step_w = width_object/100,
    one_step_h = height_object/100,
    relativeX = (e.pageX - offset.left),
    relativeY = (e.pageY - offset.top),
    x = relativeX/one_step_w,
    y = relativeY/one_step_h,
    pix_perc_w=100/width_object,
    pix_perc_h=100/height_object,
    n = $('.point').length;
    
    if(n==0)   {
        var n=1;
    }
    if(n>1) {
        $('.point:eq(0)' ).remove();
      }
     
    $("#div").append("<div  style='top:" +(y)+ "%;left:"+(x)+"%' class='point'></div>"); 


    if($('.point').length==2 && !$('.doo').length){
    $("body").append('<span class="d30 doo" data-d="30-disc.png">вставить 30"</span><br><span class="d27 doo" data-d="27-disc.png">вставить 27"</span>'); 
    }
});


function  positIMG($coeff){
    var $img2 = $('.img-disc'),
        $img_disc_w = $img2[0].naturalWidth*$coeff,
        pos_1 = $('.point:eq(0)').offset(),
        pos_2 = $('.point:eq(1)').offset(),
        $point_h = $('.point').height(),
        $point_w = $('.point').width();
    
    $img2.css({
         'position':'absolute',
        'width':$img_disc_w,
        'display':'block'
    });
    
    $img2.eq(0).css({
    'top': pos_1.top - $img_disc_w/2 - $point_h/2,
    'left': pos_1.left - $img_disc_w/2 - $point_w/2
    });
    
    $img2.eq(1).css({
    'top': pos_2.top - $img_disc_w/2 - $point_h/2,
    'left': pos_2.left - $img_disc_w/2 - $point_w/2
    });
}

$(document).on('click' , '.doo',function(){
    $('.img-disc').remove();
    var $img = $('.back'),
        $coeff =  $img.width()/$img[0].naturalWidth,
        $img_disc = $(this).attr('data-d');
    
    $("#div").append("<img style='display:none;' class='img-disc' src='http://carbon.pro/"+ $img_disc +"'><img style='display:none;' class='img-disc' src='http://carbon.pro/"+ $img_disc +"'>"); 
    
   ...