JSFiddle - React, Tailwind, and code Playground

HTML

<h1>Slider</h1>
<div id="slider"></div>

<p>J + D :  <span id="jd"></span></p>
<p>J + MONTH :  <span id="jm"></span></p>
<p>MONTH :  <span id="m"></span></p>
<input type="hidden" name="monthd" id="monthd">

JavaScript

function price() {

  var month = $("#monthd").val();

  var J = 1;
  var D = 8;
  var K = J + D;
  var U = J + month;

  $("#jd").html(K);
  $("#jm").html(U);
};
$(function() {
  $("#slider").slider({
    range: "min",
    value: 10,
    min: 10,
    max: 20,
    slide: function(event, ui) {
      price();
      $("#monthd").val(ui.value), $("#m").html(ui.value);
    },
    create: function(event, ui) {
    	$("#monthd").val(ui.value), $("#m").html(ui.value);
    }
  }), $("#monthd").val($("#slider").slider("value")),$("#m").html($("#slider").slider("value"))
});