Chip Allocation using Free Format slider or Semantic Differential Question

I am trying (in L/Studio) to use a Free Format slider or a Semantic Differential Question to do the following:

Person has 100 chips to allocate between 2 attributes of a job (Location, Specialism).

As they drag the slider (which starts midway) between the 2 attributes, the value of the chips allocated to them (X and 100-X) are displayed.

I can partly achieve this with either Q type but neither one is quite giving me what I want:

The Free Format (code below):
• displays the points allocated to Location but not Specialism
• doesn't have the labels at each end
• doesn't start midway
• has rather washed out colours

The Semantic Differential Question:
• doesn't display the points allocated to either Location or Specialism

You can see the 2 attempts at:
https://ssiweb.humanities.manchester.ac.uk/slideralloc

Can anyone help achieve the aim, using either Q format?
thanks
Dan


The Free Format code:

<script>
  $(function () {
    $("#slider-range-min").slider({
      range: "min",
      value: 0,
      min: 0,
      max: 100,
      slide: function (event, ui) {
        $("#slider_value").val(ui.value);
      }
    });
  });
</script>
 
<p>
  <label for="amount">Points Allocated to Location:</label>
  <input name="slider_value" type="text" id="slider_value" style="border:0; color:#f6931f; font-weight:bold;">
   <label for="amount">Points Allocated to Specialism:</label>
  <input name="slider_value" type="text" id="slider_value" style="border:0; color:#f6931f; font-weight:bold;">
</p>
<div id="slider-range-min"></div>