[t-slider] max设置后可选择区域的问题

[dancelion]

tdesign-miniprogram 版本

1.10.0

重现链接

No response

重现步骤

<t-dialog
  visible="{{showTemperatureControl}}"
  title="温度控制 {{temperature}}℃"
  confirm-btn="确定"
  cancel-btn="取消"
  bind:confirm="onTemperatureConfirm"
  bind:cancel="onTemperatureCancel"
>
    <view slot="content" class="camera-manage-content">
        <t-slider id="slider" defaultValue="{{temperature}}" value="{{temperature}}" marks="{{marks}}" max="{{40}}" bind:change="onTemperatureChange" />
    </view>
</t-dialog>

期望结果

设置max之后整个slider最大就是max的值，而不是右边空一片

实际结果

基础库版本

3.8.0

补充说明

另外现在这么渲染的情况下，滑动滑块的时候位置会和点的位置错开

[github-actions]

👋 @dancelion，感谢给 TDesign 提出了 issue。
请根据 issue 模版确保背景信息的完善，我们将调查并尽快回复你。

[anlyyao]

@dancelion 参考下 FAQ 处理，https://tdesign.tencent.com/miniprogram/components/slider

[anlyyao]

另外在 1.11.0 版本中有修复几个 slider 组件相关的问题，建议更新下组件库版本～

[dancelion]

@anlyyao 更新到了1.12.0版本，调用部分如下，还是一样的问题，右边空一块

onTemperatureControl() {
	this.setData({
		showTemperatureControl: true,
		temperature: this.data.device.temperature || '',
	});
	setTimeout(() => {
		const $slider = this.selectComponent('#slider');
		$slider.init();
	}, 100);
}

[anlyyao]

@anlyyao 更新到了1.12.0版本，调用部分如下，还是一样的问题，右边空一块

onTemperatureControl() {
	this.setData({
		showTemperatureControl: true,
		temperature: this.data.device.temperature || '',
	});
	setTimeout(() => {
		const $slider = this.selectComponent('#slider');
		$slider.init();
	}, 100);
}

试试这样：

 onTemperatureControl() {
    this.setData(
      {
        showTemperatureControl: true,
        temperature: this.data.device.temperature || '',
      },
      () => {
        const $slider = this.selectComponent('#slider');
        $slider.init();
      },
    );
  }

如果还是不行，辛苦提供一下完整的可复现代码片段链接~

[dancelion]

@anlyyao 不行，如果不调用init，mark不会显示，拖动一下后能正常显示mark，最大值也是在最后，但是调用init之后，mark能直接显示，但是最大值不在最后，右边空一块。
代码片段 https://developers.weixin.qq.com/s/tFVQMtm88N5h

[anlyyao]

@anlyyao 不行，如果不调用init，mark不会显示，拖动一下后能正常显示mark，最大值也是在最后，但是调用init之后，mark能直接显示，但是最大值不在最后，右边空一块。 代码片段 https://developers.weixin.qq.com/s/tFVQMtm88N5h

我瞅瞅～

[anlyyao]

@dancelion dialog 有个 300ms 的动画，得等 dialog 完全出现在 slider.init()，不然 dialog 的宽度不完整，slider 计算会错误

showDialog() {
	this.setData(
		{
			showDialog: true,
		},
		() => {
			setTimeout(() => {
				const slider = this.selectComponent('#slider');
				slider.init();
			}, 300)
		}
	);
},

[dancelion]

@anlyyao 测试了下，这么写可以，但是如果同时给当前显示变量赋值则还是无法正常渲染

this.setData(
	{
		value: 30,
		showDialog: true,
	},
	() => {
		setTimeout(() => {
			const slider = this.selectComponent('#slider');
			slider.init();
		}, 300);
	}
);

以下写法可以正常渲染：

this.setData({ value: 30 });
this.setData({ showDialog: true }, () => {
	setTimeout(() => {
		const slider = this.selectComponent('#slider');
		slider.init();
	}, 300);
});