search

tajo / react-range

🎚️Range input with a slider. Accessible. Bring your own styles and markup.
https://react-range.pages.dev
MIT License
859 stars 97 forks source link

Ability to disable some thumbs #165

Closed Rusl10 closed 2 years ago

Rusl10 commented 2 years ago

Hi. Could you tell me how to disable side thumbs or force central thumb to jump by clicked area even if it far away? https://user-images.githubusercontent.com/26712091/156972932-03fff85f-514e-44ad-90a6-5263b2eab9ab.mp4 This is my code. `import React, { useState, useRef } from 'react'; // import PropTypes from 'prop-types'; import { Range, useThumbOverlap } from 'react-range'; function ThumbLabel({ rangeRef, values, index, }) { const [labelValue, labelStyle] = useThumbOverlap( rangeRef, values, index, 1, ' - ', (value) => '${value}', ); return ( <div data-label={index} style={{ display: 'block', position: 'absolute', top: '-28px', color: '#fff', fontWeight: 'bold', fontSize: '14px', fontFamily: 'Arial,Helvetica Neue,Helvetica,sans-serif', padding: '0.125rem 0.25rem', borderRadius: '4px', backgroundColor: '#548BF4', whiteSpace: 'nowrap', visibility: 'visible', }}

{labelValue}

); }

export const SreSlider = ({ rtl }) => { const [values, setValues] = useState([0, 50, 100]); const rangeRef = useRef(); const Thumb = ({ props, index, isDragged, value, }) => { if (index !== 1) { props.style = { ...props.style, backgroundColor: 'transparent', }; } return ( <div {...props} // onChange={() => setValues([0, values[1], values[2]])} style={{ ...props.style, height: '1.5rem', width: '1.5rem', outline: 'none', borderRadius: '50%', backgroundColor: index !== 1 ? 'transparent' : '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center', visibility: index !== 1 ? 'hidden' : 'visible', }}

<div style={{ height: '1rem', width: '1rem', borderRadius: '50%', backgroundColor: index !== 1 ? 'transparent' : '#999', }} />

); }; const Track = ({ props, children }) => ( <div onMouseDown={props.onMouseDown} onTouchStart={props.onTouchStart} style={{ ...props.style, height: '48px', display: 'flex', width: '100%', }}

<div ref={props.ref} style={{ height: '0.25rem', width: '100%', borderRadius: '4px', backgroundColor: '#ccc', alignSelf: 'center', }}

{children} ); return ( <Range ref={rangeRef} values={values} onChange={(values) => setValues([0, values[1], 100])} renderThumb={Thumb} renderTrack={Track} step={1} min={0} max={100} rtl={rtl} /> );

https://user-images.githubusercontent.com/26712091/156973005-0ee8c99f-75f9-45ef-9cfa-f872d773f969.mp4

};`

I just set onchange and hide side thumbs.

Rusl10 commented 2 years ago

If somebody face with such problem this is solution - In Range.js file rewrite draggedThumbIndex variable var draggedThumbIndex = 1;