Skip to content

Add React 18 support to @logicsoftware/slider #8

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
Copilot wants to merge 4 commits into
base: master
Choose a base branch
from
Draft

Add React 18 support to @logicsoftware/slider #8

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
44875ce
Add React 18 support: lifecycle, findDOMNode, createRoot, test compat…
Copilot Jun 29, 2026
7d33083
chore: bump version to 8.7.0 for React 18 support
Copilot Jun 29, 2026
89f7f35
chore: bump major version to 9.0.0 for React 18 support
Copilot Jun 29, 2026
15489c6
fix: implement touch events and forward onFocus/onBlur to handles
Copilot Jul 5, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 3 additions & 4 deletions examples/handle.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
import '@logicsoftware/slider/assets/index.less';
import 'rc-tooltip/assets/bootstrap.css';
import React from 'react';
import ReactDOM from 'react-dom';
import { createRoot } from 'react-dom/client';
import Tooltip from 'rc-tooltip';
import Slider from '@logicsoftware/slider';

Expand All @@ -27,7 +27,7 @@ const handle = (props) => {
};

const wrapperStyle = { width: 400, margin: 50 };
ReactDOM.render(
createRoot(document.getElementById('__react-content')).render(
<div>
<div style={wrapperStyle}>
<p>Slider with custom handle</p>
Expand All @@ -41,6 +41,5 @@ ReactDOM.render(
<p>Range with custom handle</p>
<Range min={0} max={20} defaultValue={[3, 10]} tipFormatter={value => `${value}%`} />
</div>
</div>,
document.getElementById('__react-content')
</div>
);
6 changes: 3 additions & 3 deletions examples/marks.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import '@logicsoftware/slider/assets/index.less';

import React from 'react';
import ReactDOM from 'react-dom';
import { createRoot } from 'react-dom/client';
import Slider from '@logicsoftware/slider';

const style = { width: 400, margin: 50 };
Expand All @@ -23,7 +23,7 @@ function log(value) {
console.log(value); //eslint-disable-line
}

ReactDOM.render(
createRoot(document.getElementById('__react-content')).render(
<div>
<div style={style}>
<p>Slider with marks, `step=null`</p>
Expand Down Expand Up @@ -52,4 +52,4 @@ ReactDOM.render(
<Slider.Range min={-10} marks={marks} step={10} onChange={log} defaultValue={[20, 40]} />
</div>
</div>
, document.getElementById('__react-content'));
);
6 changes: 3 additions & 3 deletions examples/multirangeAdd.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
import '@logicsoftware/slider/assets/index.less';

import React from 'react';
import ReactDOM from 'react-dom';
import { createRoot } from 'react-dom/client';
import Slider from '@logicsoftware/slider';

const Handle = Slider.Handle;
Expand Down Expand Up @@ -193,10 +193,10 @@ class PureRenderRange extends React.Component {
}
}

ReactDOM.render(
createRoot(document.getElementById('__react-content')).render(
<div>
<div style={style}>
<PureRenderRange />
</div>
</div>
, document.getElementById('__react-content'));
);
6 changes: 3 additions & 3 deletions examples/range.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
import '@logicsoftware/slider/assets/index.less';

import React from 'react';
import ReactDOM from 'react-dom';
import { createRoot } from 'react-dom/client';
import Slider from '@logicsoftware/slider';

const Range = Slider.Range;
Expand Down Expand Up @@ -157,7 +157,7 @@ class PureRenderRange extends React.Component {
}
}

ReactDOM.render(
createRoot(document.getElementById('__react-content')).render(
<div>
<div style={style}>
<p>Basic Range，`allowCross=false`</p>
Expand Down Expand Up @@ -212,4 +212,4 @@ ReactDOM.render(
<PureRenderRange />
</div>
</div>
, document.getElementById('__react-content'));
);
6 changes: 3 additions & 3 deletions examples/slider.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
import '@logicsoftware/slider/assets/index.less';

import React from 'react';
import ReactDOM from 'react-dom';
import { createRoot } from 'react-dom/client';
import Slider, { createSliderWithTooltip } from '@logicsoftware/slider';

const style = { width: 600, margin: 50 };
Expand Down Expand Up @@ -115,7 +115,7 @@ class DynamicBounds extends React.Component {
}
}

ReactDOM.render(
createRoot(document.getElementById('__react-content')).render(
<div>
<div style={style}>
<p>Basic Slider</p>
Expand Down Expand Up @@ -194,4 +194,4 @@ ReactDOM.render(
<DynamicBounds />
</div>
</div>
, document.getElementById('__react-content'));
);
6 changes: 3 additions & 3 deletions examples/vertical.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import '@logicsoftware/slider/assets/index.less';

import React from 'react';
import ReactDOM from 'react-dom';
import { createRoot } from 'react-dom/client';
import Slider from '@logicsoftware/slider';

const style = { float: 'left', width: 160, height: 400, marginBottom: 160, marginLeft: 50 };
Expand All @@ -25,7 +25,7 @@ function log(value) {
console.log(value); //eslint-disable-line
}

ReactDOM.render(
createRoot(document.getElementById('__react-content')).render(
<div style={parentStyle}>
<div style={style}>
<p>Slider with marks, `step=null`</p>
Expand Down Expand Up @@ -54,4 +54,4 @@ ReactDOM.render(
/>
</div>
</div>
, document.getElementById('__react-content'));
);
Loading