work for the #9023

Author: dmitry-kurmanov

packages/survey-core/src/default-theme/blocks/sd-slider.scss

@@ -20,11 +20,7 @@ $range-slider-thumb-size: 20px;
   }
 }
 
-.sd-slider--single {
-  .sd-slider__inverse-track--left {
-    background-color: $primary;
-  }
-}
+.sd-slider--single {}
 
 .sd-slider__visual-slider-container {
   position: absolute;
@@ -37,23 +33,25 @@ $range-slider-thumb-size: 20px;
 .sd-slider__inverse-track {
   position: absolute;
   height: $range-slider-height;
-  border-radius: 10px;
   background-color: $foreground-light;
 }
 
 .sd-slider__inverse-track--left {
   left: 0;
+  border-top-left-radius: 10px;
+  border-bottom-left-radius: 10px;
 }
 
 .sd-slider__inverse-track--right {
   right: 0;
+  border-top-right-radius: 10px;
+  border-bottom-right-radius: 10px;
 }
 
 .sd-slider__range-track {
   position: absolute;
   left: 0;
   height: $range-slider-height;
-  border-radius: 14px;
   background-color: $primary;
 }
 

packages/survey-react-ui/src/reactquestion_slider.tsx

@@ -31,8 +31,8 @@ export class SurveyQuestionSlider extends SurveyQuestionElementBase {
     const ticks = showLabels ? this.getTicks() : null;
 
     const value = this.getRenderedValue();
-    const leftPercent = this.getPercent(Math.min(...value));
-    const rightPercent = this.getPercent(Math.max(...value));
+    const leftPercent = sliderType === "single" ? this.getPercent(Math.min(value, 0)) : this.getPercent(Math.min(...value));
+    const rightPercent = sliderType === "single" ? this.getPercent(Math.max(value, 0)) : this.getPercent(Math.max(...value));
 
     const rangeLeftPercent = leftPercent + "%";
     const rangeRightPercent = (100 - rightPercent) + "%";
@@ -130,22 +130,25 @@ export class SurveyQuestionSlider extends SurveyQuestionElementBase {
   private getPercent(value:number):number {
     const { max, min } = this.question;
     const fullRange = max - min;
-    return ((value - min)/fullRange)*100;
+    return (Math.abs(value - min)/fullRange)*100;
   }
 
   private getRenderedValue() {
     const { max, min, renderedmaxRangeLength: maxRangeLength, sliderType } = this.question;
-    let result = this.question.value.slice();
+    let result;
 
     if (sliderType === "single") {
+      result = this.question.value;
       if (typeof result === "undefined" || result.length === 0) {
         this.question.isIndeterminate = true;
-        return [min];
+        return min >= 0 ? [min] : [0];
       } else {
         return [result];
       }
     }
 
+    result = this.question.value.slice();
+
     if (result.length === 0) {
       const fullRange = max - min;
       this.question.isIndeterminate = true;
@@ -158,6 +161,7 @@ export class SurveyQuestionSlider extends SurveyQuestionElementBase {
 
   private refreshInputRange() {
     if (!this.question.allowDragRange) return;
+    if (!this.rangeInputRef.current) return;
     const renderedValue = this.getRenderedValue();
     const percentLastValue = this.getPercent(renderedValue[renderedValue.length - 1]);
     const percentFirstValue = this.getPercent(renderedValue[0]);