Html 通过两个输入类型创建滑块="；“范围”；在reactjs中

我有一个由

fetch（）

请求调用的JSON文件。我有两个输入

type=“range”

。我想合并这两个。 差不多

我想制作双滑块，但是如果我将两个元素放置在另一个元素的顶部，只有顶部的元素可以接受鼠标单击。我不希望使用任何外部库来响应滑块或两个处理程序之间的空间（已着色）

类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
数据：[]，
库：空，
librarySecond:null，
每页：20，
当前页面：1，
maxPage:null，
过滤器自身：“，
过滤器总计：“，
rangevalTotalF:“”，
范围总计：“
};
}
componentDidMount（）{
获取（“/json，bc”{
方法：“获取”
})
.then（response=>response.text（））
。然后（文本=>{
让Maindata=JSON.parse（text.replace（/\'/g'”）；
这是我的国家(
状态=>({
……国家，
数据：主数据
}),
() => {
这是我的图书馆；
}
);
})
.catch（error=>console.error（error））；
}
重组图书馆=（）=>{
const{filterTotalF，filterTotalS，perPage，data}=this.state；
让库=数据；
让librarySecond=数据；
librarySecond=u.chunk（librarySecond，每页）；
这是我的国家({
图书馆第二，
当前页面：1，
maxPage:librarySecond.length==0？1:librarySecond.length
});
让defaultFilterF=null；
defaultFilterF=filterTotalF
？过滤器本身
：this.renderMinFilter（librarySecond）；
让defaultFilterS=null；
defaultFilterS=filterTotalS
？过滤器总数
：this.renderMaxFilter（librarySecond）；
if（defaultFilterF！==“”&defaultFilterS！==“”）{
library=library.filter(
项目=>
item.totalCom>=defaultFilterF&&item.totalCom
此.rendershowesitimedep(
item.info.departureinformation.ticketinfooo.exitinfo.showesitime
)>=filterExitTimeDepF&&
此.rendershowesitimedep(
item.info.departureinformation.ticketinfooo.exitinfo.showesitime
) 
此.rendershowextimedes(
item.info.returninformation.ticketinfooo.exitinfo.showexittime
)>=filterExitTimeDesF&&
此.rendershowextimedes(
item.info.returninformation.ticketinfooo.exitinfo.showexittime
)  {
返回librarySecond.reduce（（acc，lib）=>{
const libMin=Math.min（…lib.map（item=>item.totalCom））；
返回acc==未定义的libMin:libMin{
返回librarySecond.reduce（（acc，lib）=>{
const libMax=Math.max（…lib.map（item=>item.totalCom））；
返回libMax>acc？libMax:acc；
}, 0);
};
//上一页
previousPage=事件=>{
这是一个“handleClick”（事件）；
这是我的国家({
currentPage:this.state.currentPage-1
});
};
//下一页
下一页=事件=>{
这是一个“handleClick”（事件）；
这是我的国家({
currentPage:this.state.currentPage+1
});
};
//手柄过滤器
handleFilterTotal=evt=>{
让值=evt.target.value；
让key=evt.target.getAttribute（“数据键”）；
如果（键==“1”）{
这是我的国家(
{
filterTotalF:evt.target.value，
rangevalTotalF:evt.target.value
},
() => {
这是我的图书馆；
}
);
}否则，如果（键==“2”）{
这是我的国家(
{
过滤器总数：evt.target.value，
rangevalTotalS:evt.target.value
},
() => {
这是我的图书馆；
}
);
}
};
//每页句柄
handlePerPage=evt=>
这是我的国家(
{
每页：evt.target.value
},
（）=>this.reorganiseLibrary（）
);
//库的句柄渲染
renderLibrary=（）=>{
const{library，currentPage}=this.state；
如果（！library | |（library&&library.length==0））{
返回(
برای جستجوی شما نتیجه ای یافت نشد!
شما می توانید با انجام مجدد عملیات جستجو,نتیجه مورد نظر خود را
بیابید
);
}
返回库[currentPage-1]
.sort（（a，b）=>a.total-b.total）
.map（（项目，i）=>(
{item.id}
));
};
renderMinTotal=（）=>{
const{librarySecond}=this.state；
如果（！librarySecond | |（librarySecond&&librarySecond.length==0））{
返回“”；
}
返回librarySecond.reduce（（acc，lib）=>{
const libMin=Math.min（…lib.map（item=>item.totalCom））；
返回acc==未定义的libMin:libMin{
const{librarySecond}=this.state；
如果（！librarySecond | |（librarySecond&&librarySecond.length==0））{
返回“”；
}
返回librarySecond.reduce（（acc，lib）=>{
const libMax=Math.max（…lib.map（item=>item.totalCom））；
返回libMax>acc？libMax:acc；
}, 0);
};
render（）{
常数{
图书馆，
当前页，
佩奇，
maxPage，
兰格瓦夫，
范围总计，
图书馆秒
}=本州；
设defaultRangeF=null；
defaultRangeF=rangevalTotalF(
{rangevalTotalF}
) : (
{this.renderMinTotal（）}
);
让defaultRangeS=null；
defaultRangeS=rangevalTotalS(
{rangevalTotalS}
) : (
{this.renderMaxTotal（）}
);
返回(
{defaultRangeS}
{defaultRa