Skip to content

Commit

Permalink
fix sliders text input
Browse files Browse the repository at this point in the history
  • Loading branch information
@mr-eyes
mr-eyes committed Sep 29, 2024
1 parent bdd0ca1 commit 71f7725
Showing 1 changed file with 54 additions and 27 deletions.
81 changes: 54 additions & 27 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2070,35 +2070,51 @@ <h3 id="plot-title-display-${plotId}" class="plot-title mt-3 text-center">Plot $
`).join('')}
</div>
</div>
<!-- Range Sliders with Input Boxes -->
<div class="row mt-3">
<!-- Range Sliders with Input Boxes in Compact Layout -->
<div class="container-fluid">
<!-- X-Axis Range Slider -->
<div class="col-md-6">
<label for="x-range-slider-${plotId}">X-Axis Range:</label>
<div class="d-flex align-items-center">
<input type="number" id="x-range-min-input-${plotId}" class="form-control mr-2" placeholder="Min" style="width: 80px;">
<div id="x-range-slider-${plotId}" class="range-slider flex-grow-1 mx-2"></div>
<input type="number" id="x-range-max-input-${plotId}" class="form-control ml-2" placeholder="Max" style="width: 80px;">
<div class="row mt-3 p-3 border rounded" style="background-color: #f9f9f9;">
<div class="col-2 d-flex align-items-center">
<label for="x-range-slider-${plotId}" class="mb-0">X-Axis Range:</label>
</div>
<div class="col-2">
<input type="number" id="x-range-min-input-${plotId}" class="form-control" placeholder="Min">
</div>
<div class="col-6">
<div id="x-range-slider-${plotId}" class="range-slider"></div>
</div>
<div class="col-2">
<input type="number" id="x-range-max-input-${plotId}" class="form-control" placeholder="Max">
</div>
</div>
<!-- Y-Axis Range Slider -->
<div class="col-md-6">
<label for="y-range-slider-${plotId}">Y-Axis Range:</label>
<div class="d-flex align-items-center">
<input type="number" id="y-range-min-input-${plotId}" class="form-control mr-2" placeholder="Min" style="width: 80px;">
<div id="y-range-slider-${plotId}" class="range-slider flex-grow-1 mx-2"></div>
<input type="number" id="y-range-max-input-${plotId}" class="form-control ml-2" placeholder="Max" style="width: 80px;">
<div class="row mt-3 p-3 border rounded" style="background-color: #f9f9f9;">
<div class="col-2 d-flex align-items-center">
<label for="y-range-slider-${plotId}" class="mb-0">Y-Axis Range:</label>
</div>
<div class="col-2">
<input type="number" id="y-range-min-input-${plotId}" class="form-control" placeholder="Min">
</div>
<div class="col-6">
<div id="y-range-slider-${plotId}" class="range-slider"></div>
</div>
<div class="col-2">
<input type="number" id="y-range-max-input-${plotId}" class="form-control" placeholder="Max">
</div>
</div>
</div>
<!-- Hue Range Slider -->
<div id="hue-range-slider-container-${plotId}" class="row mt-3" style="display: none;">
<div class="col-md-12">
<label for="hue-range-slider-${plotId}">Color Range:</label>
<div class="d-flex align-items-center">
<input type="number" id="hue-range-min-input-${plotId}" class="form-control mr-2" placeholder="Min" style="width: 80px;">
<div id="hue-range-slider-${plotId}" class="range-slider flex-grow-1 mx-2"></div>
<input type="number" id="hue-range-max-input-${plotId}" class="form-control ml-2" placeholder="Max" style="width: 80px;">
<!-- Hue Range Slider -->
<div id="hue-range-slider-container-${plotId}" class="row mt-3 p-3 border rounded" style="background-color: #f9f9f9; display: none;">
<div class="col-2 d-flex align-items-center">
<label for="hue-range-slider-${plotId}" class="mb-0">Color Range:</label>
</div>
<div class="col-2">
<input type="number" id="hue-range-min-input-${plotId}" class="form-control" placeholder="Min">
</div>
<div class="col-6">
<div id="hue-range-slider-${plotId}" class="range-slider"></div>
</div>
<div class="col-2">
<input type="number" id="hue-range-max-input-${plotId}" class="form-control" placeholder="Max">
</div>
</div>
</div>
Expand Down Expand Up @@ -2241,13 +2257,12 @@ <h3 id="plot-title-display-${plotId}" class="plot-title mt-3 text-center">Plot $
xSlider.noUiSlider.on('update', function (values, handle) {
xMinInput.value = parseFloat(values[0]).toFixed(2);
xMaxInput.value = parseFloat(values[1]).toFixed(2);
});
xSlider.noUiSlider.on('change', function (values, handle) {
// Delay updating the plot

// Debounce plot update
clearTimeout(xSlider.updateTimeout);
xSlider.updateTimeout = setTimeout(function () {
updatePlot(plotId);
}, 500); // 500ms delay
}, 500);
});
// Synchronize input boxes with slider
xMinInput.addEventListener('change', function () {
Expand Down Expand Up @@ -2290,6 +2305,12 @@ <h3 id="plot-title-display-${plotId}" class="plot-title mt-3 text-center">Plot $
ySlider.noUiSlider.on('update', function (values, handle) {
yMinInput.value = parseFloat(values[0]).toFixed(2);
yMaxInput.value = parseFloat(values[1]).toFixed(2);

// Debounce plot update
clearTimeout(ySlider.updateTimeout);
ySlider.updateTimeout = setTimeout(function () {
updatePlot(plotId);
}, 500);
});
ySlider.noUiSlider.on('change', function (values, handle) {
// Delay updating the plot
Expand Down Expand Up @@ -2343,6 +2364,12 @@ <h3 id="plot-title-display-${plotId}" class="plot-title mt-3 text-center">Plot $
hueSlider.noUiSlider.on('update', function (values, handle) {
hueMinInput.value = parseFloat(values[0]).toFixed(2);
hueMaxInput.value = parseFloat(values[1]).toFixed(2);

// Debounce plot update
clearTimeout(hueSlider.updateTimeout);
hueSlider.updateTimeout = setTimeout(function () {
updatePlot(plotId);
}, 500);
});
hueSlider.noUiSlider.on('change', function (values, handle) {
// Delay updating the plot
Expand Down

0 comments on commit 71f7725

Please sign in to comment.