From 65a1d851e902c7662b717a8c0b98d6b1b5089df7 Mon Sep 17 00:00:00 2001 From: BeritJanssen Date: Tue, 31 Oct 2023 11:50:12 +0100 Subject: [PATCH] close #495: increase steps of slider for centering --- frontend/src/components/Question/_TextRange.js | 14 +++++++++----- 1 file changed, 9 insertions(+), 5 deletions(-) diff --git a/frontend/src/components/Question/_TextRange.js b/frontend/src/components/Question/_TextRange.js index a562f8fb2..0206de9fe 100644 --- a/frontend/src/components/Question/_TextRange.js +++ b/frontend/src/components/Question/_TextRange.js @@ -5,7 +5,11 @@ import classNames from "classnames"; import RangeLimits from "./_RangeLimits"; import RangeTitle from "./_RangeTitle"; -// TextRange is a question view that makes you select a value within the given range, using a slider from a list of choices +/** + * TextRange is a question view that makes you select a value within the given range, using a slider from a list of choices + * Values are multiplied by 10 to be displayed as a slider. + * This to ensure that the slider is centered initially, even if we don't have a center value + * */ const TextRange = ({ question, value, onChange, emphasizeTitle }) => { const emptyValue = !value; @@ -13,14 +17,14 @@ const TextRange = ({ question, value, onChange, emphasizeTitle }) => { const choices = Object.values(question.choices); const onSliderChange = (index) => { - onChange(keys[index]); + onChange(keys[Math.round(index/10)]); }; let sliderValue = 0; if (emptyValue) { - sliderValue = Math.round(keys.length / 2) - 1; + sliderValue = Math.round(keys.length * 5) - 5; } else { - sliderValue = keys.indexOf(value); + sliderValue = keys.indexOf(value) * 10; } return ( @@ -38,7 +42,7 @@ const TextRange = ({ question, value, onChange, emphasizeTitle }) => { value={sliderValue} onChange={onSliderChange} min={0} - max={choices.length - 1} + max={(choices.length * 10) - 10} tooltip={false} />