Fix outer div

appbaseio · Feb 5, 2024 · cfee282 · cfee282
1 parent 32584f0
commit cfee282
Showing 1 changed file with 41 additions and 39 deletions.
diff --git a/packages/vue/src/components/range/DynamicRangeSlider.jsx b/packages/vue/src/components/range/DynamicRangeSlider.jsx
@@ -340,45 +340,47 @@ const DynamicRangeSlider = {
 		return (
 			<Container class={this.$props.className}>
 				{this.$scopedSlots.title ? this.$scopedSlots.title() : null}
-				<NoSSR class={getClassName(this.$props.innerClass, 'outer')}>
-					<Slider class={getClassName(this.$props.innerClass, 'slider')}>
-						<vue-slider-component
-							ref="slider"
-							value={[
-								Math.floor(Math.max(start, this.currentValue[0])),
-								Math.ceil(Math.min(end, this.currentValue[1])),
-							]}
-							min={Math.floor(Math.min(start, this.currentValue[0]))}
-							max={Math.ceil(Math.max(end, this.currentValue[1]))}
-							onDrag-end={this.handleSlider}
-							dotSize={20}
-							height={4}
-							enable-cross={false}
-							tooltip="always"
-							{...{ props: this.$props.sliderOptions }}
-						/>
-
-						{this.labels ? (
-							<div class="label-container">
-								<label
-									class={
-										getClassName(this.$props.innerClass, 'label')
-										|| 'range-label-left'
-									}
-								>
-									{this.labels.start}
-								</label>
-								<label
-									class={
-										getClassName(this.$props.innerClass, 'label')
-										|| 'range-label-right'
-									}
-								>
-									{this.labels.end}
-								</label>
-							</div>
-						) : null}
-					</Slider>
+				<NoSSR>
+					<div class={getClassName(this.$props.innerClass, 'outer')}>
+						<Slider class={getClassName(this.$props.innerClass, 'slider')}>
+							<vue-slider-component
+								ref="slider"
+								value={[
+									Math.floor(Math.max(start, this.currentValue[0])),
+									Math.ceil(Math.min(end, this.currentValue[1])),
+								]}
+								min={Math.floor(Math.min(start, this.currentValue[0]))}
+								max={Math.ceil(Math.max(end, this.currentValue[1]))}
+								onDrag-end={this.handleSlider}
+								dotSize={20}
+								height={4}
+								enable-cross={false}
+								tooltip="always"
+								{...{ props: this.$props.sliderOptions }}
+							/>
+
+							{this.labels ? (
+								<div class="label-container">
+									<label
+										class={
+											getClassName(this.$props.innerClass, 'label')
+											|| 'range-label-left'
+										}
+									>
+										{this.labels.start}
+									</label>
+									<label
+										class={
+											getClassName(this.$props.innerClass, 'label')
+											|| 'range-label-right'
+										}
+									>
+										{this.labels.end}
+									</label>
+								</div>
+							) : null}
+						</Slider>
+					</div>
 				</NoSSR>
 			</Container>
 		);