Skip to content

Commit 4d5ee38

Browse files
dmitry-kurmanovdmitry-kurmanov
authored
Slider: First slider element on a page does not follow step size during drag. #10559 (#10582)
1 parent 4d10f6b commit 4d5ee38

File tree

11 files changed

+26
-26
lines changed

11 files changed

+26
-26
lines changed

‎packages/survey-angular-ui/src/questions/slider.component.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<div [class]="model.rootCss" #contentElement>
33
<input *ngIf="model.sliderType !== 'single' && model.allowDragRange" #rangeInputRef
44
name="range-input" [class]="model.cssClasses.input" type="range" tabIndex="-1"
5-
id="sjs-slider-input-range-input"
5+
[attr.id]="model.id + '-sjs-slider-input-range-input'"
66
[attr.min]="model.min" [attr.max]="model.max" [attr.step]="model.step" aria-hidden="true"
77
(input)="model.handleRangeOnChange($any($event))"
88
(pointerdown)="model.handleRangePointerDown($any($event), rootRef)"
@@ -15,7 +15,7 @@
1515
<div [class]="model.cssClasses.rangeTrack" [style]="{ left: model.getTrackPercentLeft() + '%', right: model.getTrackPercentRight() + '%' }" ></div>
1616

1717
<ng-container *ngFor="let value of valueArray; index as i; trackBy: trackByRenderedValue;">
18-
<input [class]="model.cssClasses.input" [attr.id]="'sjs-slider-input-' + i" type="range" [value]="value"
18+
<input [class]="model.cssClasses.input" [attr.id]="model.id + '-sjs-slider-input-' + i" type="range" [value]="value"
1919
[attr.min]="model.min" [attr.max]="model.max" [attr.step]="model.step" [disabled]="model.isDisabledAttr"
2020
(input)="model.handleOnChange($any($event), i)"
2121
(pointerdown)="model.handlePointerDown($any($event))"

‎packages/survey-core/src/question_slider.ts‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -484,7 +484,7 @@ export class QuestionSliderModel extends Question implements ISliderLabelItemOwn
484484
const inputNode = <HTMLInputElement>event.target;
485485

486486
if (step) {
487-
inputNode.step = "0.1";
487+
inputNode.step = "0.01";
488488
}
489489

490490
if (allowDragRange) {
@@ -523,7 +523,7 @@ export class QuestionSliderModel extends Question implements ISliderLabelItemOwn
523523
const { allowDragRange, renderedValue, getPercent } = this;
524524
if (!allowDragRange) return;
525525
//if (!this.rangeInputRef.current) return;
526-
const input:HTMLElement = inputRef || DomDocumentHelper.getDocument().getElementById("sjs-slider-input-range-input"); //TODO
526+
const input:HTMLElement = inputRef || DomDocumentHelper.getDocument().getElementById(this.id + "-sjs-slider-input-range-input"); //TODO
527527

528528
if (!input) return;
529529
const percentLastValue = getPercent(renderedValue[renderedValue.length - 1]);
@@ -628,8 +628,8 @@ export class QuestionSliderModel extends Question implements ISliderLabelItemOwn
628628
const { step, renderedValue } = this;
629629
if (step) {
630630
for (let i = 0; i < renderedValue.length; i++) {
631-
const input:any = DomDocumentHelper.getDocument().getElementById(`sjs-slider-input-${i}`); //TODO
632-
input.step = 0.1;
631+
const input:any = DomDocumentHelper.getDocument().getElementById(this.id + `-sjs-slider-input-${i}`); //TODO
632+
input.step = 0.01;
633633
}
634634
}
635635
this.oldValue = this.renderedValue;
@@ -648,7 +648,7 @@ export class QuestionSliderModel extends Question implements ISliderLabelItemOwn
648648
if (step) {
649649
for (let i = 0; i < renderedValue.length; i++) {
650650
renderedValue[i] = getClosestToStepValue(renderedValue[i]);
651-
const input:any = DomDocumentHelper.getDocument().getElementById(`sjs-slider-input-${i}`); //TODO
651+
const input:any = DomDocumentHelper.getDocument().getElementById(this.id + `-sjs-slider-input-${i}`); //TODO
652652
input.step = step;
653653
}
654654
}

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -93,12 +93,12 @@ export class SurveyQuestionSlider extends SurveyQuestionElementBase {
9393
const {
9494
renderedMax: max, renderedMin: min, step, cssClasses, isDisabledAttr, renderedValue,
9595
handleOnChange, handlePointerDown, handlePointerUp, handleKeyDown, handleKeyUp,
96-
handleOnFocus, handleOnBlur
96+
handleOnFocus, handleOnBlur, id
9797
} = this.question;
9898

9999
const value = renderedValue[i];
100100

101-
const input = <input className={cssClasses.input} id={"sjs-slider-input-" + i} type="range"
101+
const input = <input className={cssClasses.input} id={id + "-sjs-slider-input-" + i} type="range"
102102
min={min} max={max} step={step} value={value}
103103
onChange={ (e)=>{ handleOnChange(e.nativeEvent as InputEvent, i); } }
104104
onPointerDown={ (e)=>{ handlePointerDown(e.nativeEvent); } } onPointerUp={ (e)=>{ e.stopPropagation(); handlePointerUp(e.nativeEvent); } }
@@ -116,8 +116,8 @@ export class SurveyQuestionSlider extends SurveyQuestionElementBase {
116116
}
117117

118118
private getRangeInput() {
119-
const { renderedMax: max, renderedMin: min, step, cssClasses, handleRangeOnChange, handleRangePointerDown, handleRangePointerUp } = this.question;
120-
return <input name={"range-input"} id={"sjs-slider-input-range-input"} ref={this.rangeInputRef} className={cssClasses.input} type="range" aria-hidden="true"
119+
const { renderedMax: max, renderedMin: min, step, cssClasses, handleRangeOnChange, handleRangePointerDown, handleRangePointerUp, id } = this.question;
120+
return <input name={"range-input"} id={id + "-sjs-slider-input-range-input"} ref={this.rangeInputRef} className={cssClasses.input} type="range" aria-hidden="true"
121121
min={min} max={max} step={step} tabIndex={-1} onChange={(e)=>{ handleRangeOnChange(e.nativeEvent as InputEvent); }}
122122
onPointerDown={ (e)=>{ e.persist(); handleRangePointerDown(e.nativeEvent, this.control); } }
123123
onPointerUp={(e)=>{ handleRangePointerUp(e.nativeEvent, this.control); }} />;

‎packages/survey-vue3-ui/src/Slider.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
<input v-if="question.sliderType !== 'single' && question.allowDragRange" ref="rangeInputRef"
44
name="range-input" :class="question.cssClasses.input" type="range" tabIndex="-1"
55
:min="question.min" :max="question.max" :step="question.step" aria-hidden="true"
6-
id="sjs-slider-input-range-input"
6+
:id="question.id + '-sjs-slider-input-range-input'"
77
@input="(e)=>{question.handleRangeOnChange(e as InputEvent)}"
88
@pointerdown="(e)=>{question.handleRangePointerDown(e, rootRef as HTMLElement)}"
99
@pointerup="(e)=>{question.handleRangePointerUp(e, rootRef as HTMLElement)}" />
@@ -15,7 +15,7 @@
1515
<div :class="question.cssClasses.rangeTrack" :style="{ left: question.getTrackPercentLeft() + '%', right: question.getTrackPercentRight() + '%' }" ></div>
1616

1717
<template v-for="(value, i) in question.renderedValue" :key="i">
18-
<input :class="question.cssClasses.input" :id="'sjs-slider-input-' + i" type="range" :value="value"
18+
<input :class="question.cssClasses.input" :id="question.id + '-sjs-slider-input-' + i" type="range" :value="value"
1919
:min="question.min" :max="question.max" :step="question.step" :disabled="question.isDisabledAttr"
2020
@input="(e)=>{question.handleOnChange(e as InputEvent, i)}"
2121
@pointerdown="(e)=>{question.handlePointerDown(e)}"

‎tests/markup/snapshots/slider-custom-labels.snap.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
</div>
88
<div class="sd-slider__range-track sd-slider__track" style="left:0%; right:100%;">
99
</div>
10-
<input aria-invalid="false" aria-label="name" aria-required="false" class="sd-slider__input" id="sjs-slider-input-0" max="100" min="0" step="1" type="range">
10+
<input aria-invalid="false" aria-label="name" aria-required="false" class="sd-slider__input" id="testid0-sjs-slider-input-0" max="100" min="0" step="1" type="range">
1111
<div class="sd-slider__thumb-container sd-slider__thumb-container--indeterminate" style="left:0%;">
1212
<div class="sd-slider__tooltip sd-slider__tooltip--on-hover">
1313
<div class="sd-slider__tooltip-panel">

‎tests/markup/snapshots/slider-default-value-range-mode.snap.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<div class="sd-slider">
2-
<input aria-hidden="true" class="sd-slider__input" id="sjs-slider-input-range-input" max="100" min="0" name="range-input" step="1" style="--sjs-range-slider-range-input-thumb-left:calc(30% + 20px); --sjs-range-slider-range-input-thumb-position:absolute; --sjs-range-slider-range-input-thumb-width:calc(30% - 20px - 20px);" tabindex="-1" type="range">
2+
<input aria-hidden="true" class="sd-slider__input" id="testid0-sjs-slider-input-range-input" max="100" min="0" name="range-input" step="1" style="--sjs-range-slider-range-input-thumb-left:calc(30% + 20px); --sjs-range-slider-range-input-thumb-position:absolute; --sjs-range-slider-range-input-thumb-width:calc(30% - 20px - 20px);" tabindex="-1" type="range">
33
<div class="sd-slider-container">
44
<div class="sd-slider-container__slider">
55
<div class="sd-slider__inverse-track sd-slider__inverse-track--left sd-slider__track" style="width:30%;">
@@ -8,7 +8,7 @@
88
</div>
99
<div class="sd-slider__range-track sd-slider__track" style="left:30%; right:40%;">
1010
</div>
11-
<input aria-invalid="false" aria-label="name" aria-required="false" class="sd-slider__input" id="sjs-slider-input-0" max="100" min="0" step="1" type="range">
11+
<input aria-invalid="false" aria-label="name" aria-required="false" class="sd-slider__input" id="testid0-sjs-slider-input-0" max="100" min="0" step="1" type="range">
1212
<div class="sd-slider__thumb-container" style="left:30%;">
1313
<div class="sd-slider__tooltip sd-slider__tooltip--on-hover">
1414
<div class="sd-slider__tooltip-panel">
@@ -20,7 +20,7 @@
2020
</div>
2121
</div>
2222
</div>
23-
<input aria-invalid="false" aria-label="name" aria-required="false" class="sd-slider__input" id="sjs-slider-input-1" max="100" min="0" step="1" type="range">
23+
<input aria-invalid="false" aria-label="name" aria-required="false" class="sd-slider__input" id="testid0-sjs-slider-input-1" max="100" min="0" step="1" type="range">
2424
<div class="sd-slider__thumb-container" style="left:60%;">
2525
<div class="sd-slider__tooltip sd-slider__tooltip--on-hover">
2626
<div class="sd-slider__tooltip-panel">

‎tests/markup/snapshots/slider-default-value-single-mode.snap.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
</div>
88
<div class="sd-slider__range-track sd-slider__track" style="left:0%; right:50%;">
99
</div>
10-
<input aria-invalid="false" aria-label="name" aria-required="false" class="sd-slider__input" id="sjs-slider-input-0" max="100" min="0" step="1" type="range">
10+
<input aria-invalid="false" aria-label="name" aria-required="false" class="sd-slider__input" id="testid0-sjs-slider-input-0" max="100" min="0" step="1" type="range">
1111
<div class="sd-slider__thumb-container" style="left:50%;">
1212
<div class="sd-slider__tooltip sd-slider__tooltip--on-hover">
1313
<div class="sd-slider__tooltip-panel">

‎tests/markup/snapshots/slider-range-mode.snap.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<div class="sd-slider">
2-
<input aria-hidden="true" class="sd-slider__input" id="sjs-slider-input-range-input" max="100" min="0" name="range-input" step="1" style="--sjs-range-slider-range-input-thumb-left:calc(0% + 20px); --sjs-range-slider-range-input-thumb-position:absolute; --sjs-range-slider-range-input-thumb-width:calc(100% - 20px - 20px);" tabindex="-1" type="range">
2+
<input aria-hidden="true" class="sd-slider__input" id="testid0-sjs-slider-input-range-input" max="100" min="0" name="range-input" step="1" style="--sjs-range-slider-range-input-thumb-left:calc(0% + 20px); --sjs-range-slider-range-input-thumb-position:absolute; --sjs-range-slider-range-input-thumb-width:calc(100% - 20px - 20px);" tabindex="-1" type="range">
33
<div class="sd-slider-container">
44
<div class="sd-slider-container__slider">
55
<div class="sd-slider__inverse-track sd-slider__inverse-track--left sd-slider__track" style="width:0%;">
@@ -8,7 +8,7 @@
88
</div>
99
<div class="sd-slider__range-track sd-slider__track" style="left:0%; right:0%;">
1010
</div>
11-
<input aria-invalid="false" aria-label="name" aria-required="false" class="sd-slider__input" id="sjs-slider-input-0" max="100" min="0" step="1" type="range">
11+
<input aria-invalid="false" aria-label="name" aria-required="false" class="sd-slider__input" id="testid0-sjs-slider-input-0" max="100" min="0" step="1" type="range">
1212
<div class="sd-slider__thumb-container sd-slider__thumb-container--indeterminate" style="left:0%;">
1313
<div class="sd-slider__tooltip sd-slider__tooltip--on-hover">
1414
<div class="sd-slider__tooltip-panel">
@@ -20,7 +20,7 @@
2020
</div>
2121
</div>
2222
</div>
23-
<input aria-invalid="false" aria-label="name" aria-required="false" class="sd-slider__input" id="sjs-slider-input-1" max="100" min="0" step="1" type="range">
23+
<input aria-invalid="false" aria-label="name" aria-required="false" class="sd-slider__input" id="testid0-sjs-slider-input-1" max="100" min="0" step="1" type="range">
2424
<div class="sd-slider__thumb-container sd-slider__thumb-container--indeterminate" style="left:100%;">
2525
<div class="sd-slider__tooltip sd-slider__tooltip--on-hover">
2626
<div class="sd-slider__tooltip-panel">

‎tests/markup/snapshots/slider-read-only-range-mode.snap.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<div class="sd-slider">
2-
<input aria-hidden="true" class="sd-slider__input" id="sjs-slider-input-range-input" max="100" min="0" name="range-input" step="1" style="--sjs-range-slider-range-input-thumb-left:calc(30% + 20px); --sjs-range-slider-range-input-thumb-position:absolute; --sjs-range-slider-range-input-thumb-width:calc(30% - 20px - 20px);" tabindex="-1" type="range">
2+
<input aria-hidden="true" class="sd-slider__input" id="testid0-sjs-slider-input-range-input" max="100" min="0" name="range-input" step="1" style="--sjs-range-slider-range-input-thumb-left:calc(30% + 20px); --sjs-range-slider-range-input-thumb-position:absolute; --sjs-range-slider-range-input-thumb-width:calc(30% - 20px - 20px);" tabindex="-1" type="range">
33
<div class="sd-slider-container">
44
<div class="sd-slider-container__slider">
55
<div class="sd-slider__inverse-track sd-slider__inverse-track--left sd-slider__track" style="width:30%;">
@@ -8,7 +8,7 @@
88
</div>
99
<div class="sd-slider__range-track sd-slider__track" style="left:30%; right:40%;">
1010
</div>
11-
<input aria-invalid="false" aria-label="name" aria-required="false" class="sd-slider__input" id="sjs-slider-input-0" max="100" min="0" step="1" type="range">
11+
<input aria-invalid="false" aria-label="name" aria-required="false" class="sd-slider__input" id="testid0-sjs-slider-input-0" max="100" min="0" step="1" type="range">
1212
<div class="sd-slider__thumb-container" style="left:30%;">
1313
<div class="sd-slider__tooltip sd-slider__tooltip--on-hover">
1414
<div class="sd-slider__tooltip-panel">
@@ -20,7 +20,7 @@
2020
</div>
2121
</div>
2222
</div>
23-
<input aria-invalid="false" aria-label="name" aria-required="false" class="sd-slider__input" id="sjs-slider-input-1" max="100" min="0" step="1" type="range">
23+
<input aria-invalid="false" aria-label="name" aria-required="false" class="sd-slider__input" id="testid0-sjs-slider-input-1" max="100" min="0" step="1" type="range">
2424
<div class="sd-slider__thumb-container" style="left:60%;">
2525
<div class="sd-slider__tooltip sd-slider__tooltip--on-hover">
2626
<div class="sd-slider__tooltip-panel">

‎tests/markup/snapshots/slider-read-only-single-mode.snap.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
</div>
88
<div class="sd-slider__range-track sd-slider__track" style="left:0%; right:50%;">
99
</div>
10-
<input aria-invalid="false" aria-label="name" aria-required="false" class="sd-slider__input" id="sjs-slider-input-0" max="100" min="0" step="1" type="range">
10+
<input aria-invalid="false" aria-label="name" aria-required="false" class="sd-slider__input" id="testid0-sjs-slider-input-0" max="100" min="0" step="1" type="range">
1111
<div class="sd-slider__thumb-container" style="left:50%;">
1212
<div class="sd-slider__tooltip sd-slider__tooltip--on-hover">
1313
<div class="sd-slider__tooltip-panel">

0 commit comments

Comments
 (0)