如何在Javascript中创建显示不同输出字段的窗体滑块

我想创建一个Slider表单，使用Javascript在滑动时显示不同的输出字段。 有点像这样

---

有人能给我建议如何制作或提供一些关于类似事情的链接吗？我找不到Google。

我在最近的一个项目中制作了其中一个，我将在这里向您展示代码。基本上，我们创建了两种形式和一个顶部。顶部始终显示，我们使用flexbox将其一分为二。通过一个JS onclick（）事件，我们可以根据用户是单击注册头还是登录头来更改显示两个表单中的哪一个。一旦您了解了代码的工作原理，请确保尝试自己编写此代码-这有助于学习前端，而不是复制粘贴代码，永远不要自己编写！）

函数形式选择器（选择器）{
让signupElement=document.getElementById（“注册”）
让LogineElement=document.getElementById（“登录”）
让signupForm=document.getElementById（“signupForm”）
让loginForm=document.getElementById（“loginForm”）
如果（选择器==“注册”）{
signup.classList.add（“selectedHeader”）
login.classList.remove（“selectedHeader”）
signupForm.classList.add（“showForm”）
loginForm.classList.remove（“showForm”）
}
else if（选择器==“登录”）{
signup.classList.remove（“selectedHeader”）
login.classList.add（“selectedHeader”）
signupForm.classList.remove（“showForm”）
loginForm.classList.add（“showForm”）
}
}

@导入url（“https://fonts.googleapis.com/css2?family=Poppins:wght@200&显示=交换“；
身体{
保证金：0；
填充：0；
字体系列：“罂粟花”、“无衬线”；
溢出x：隐藏；
溢出y：滚动；
--初级：rgb（4214,4）；
--原色：rgb（15,15,15）；
--二级阴影：rgb（238240243）；
滚动行为：平滑；
滚动填充：300px；
}
.formContainer{
背景：var（--二次阴影）；
最小高度：100vh；
显示器：flex；
对齐项目：居中；
过渡：均为0.3秒；
}
.表格{
宽度：500px；
保证金：自动；
边界半径：6px；
盒影：rgba（0,0,0,0.04）0 12px 60px 0；
背景：rgb（255、255、255）；
填充：10px；
过渡：均为0.3秒；
}
.formContent{
填充：15px 20px；
柔性包装：包装；
证明内容：中心；
显示：无；
动画：上浮0.6s；
位置：相对位置；
}
.formInput{
边框：1.5px实心rgb（165165165）；
填充：10px；
大纲：无；
过渡：均为0.3秒；
利润率：18px；
边界半径：6px；
字体系列：“罂粟花”，无衬线；
字号：18px；
}
.formInput：悬停{
边框颜色：var（--主色）；
}
.formInput：焦点{
边框颜色：var（--主色）；
盒影：rgba（0,0,0,0.1）0 3px 36px 0；
}
.formButton{
显示：块；
宽度：60%；
边界：无；
大纲：无；
光标：指针；
填充：10px0；
字号：17px；
边界半径：6px；
过渡：均为0.3秒；
利润率：20px0；
盒影：rgba（0,0,0,0.22）0 12px 24px 0；
背景：var（--初级）；
颜色：白色；
字体系列：“罂粟花”；
字体大小：粗体；
}
.formButton:悬停{
盒影：rgba（0,0,0,0.14）0 6px 24px 0，
插入rgba（255，255，255，0.247）0 10000px；
}
.formButton：焦点{
盒影：rgba（0,0,0,0.26）0 12px 36px 0，
插入rgba（255，255，255，0.247）0 10000px；
背景：var（--初级）；
颜色：白色；
}
.formTopper{
背景：rgb（236236236）；
显示器：flex；
证明内容：周围的空间；
边界半径：6px；
}
.formHeader{
宽度：50%；
文本对齐：居中；
保证金：4倍；
填充：4px；
边界半径：6px；
字体大小：正常；
光标：指针；
过渡：均为0.3秒；
字号：28px；
}
.formHeader:悬停{
背景：rgb（219219219219）；
}
.selectedHeader{
背景：白色；
盒影：rgba（0,0,0,0.13）0 6px 45px 0；
}
.selectedHeader:悬停{
背景：白色；
}
.展示形式{
显示器：flex；
}

报名
登录
报名
登录