diff --git a/packages/react-ui/__tests__/widgets/RangeWidgetUI.test.js b/packages/react-ui/__tests__/widgets/RangeWidgetUI.test.js
index ffb806eac..9c68d3ddf 100644
--- a/packages/react-ui/__tests__/widgets/RangeWidgetUI.test.js
+++ b/packages/react-ui/__tests__/widgets/RangeWidgetUI.test.js
@@ -7,8 +7,16 @@ describe('RangeWidgetUI', () => {
 
   test('renders with default props', () => {
     const { container } = render(<Widget />);
-    const minValue = screen.getByRole('slider', { name: 'min value' });
-    const maxValue = screen.getByRole('slider', { name: 'max value' });
+
+    // const minValue = screen.getByLabelText('min value');
+    // const maxValue = screen.getByLabelText('max value');
+    const minValue = document.querySelector(
+      'input[type="range"][aria-label="min value"]'
+    );
+    const maxValue = document.querySelector(
+      'input[type="range"][aria-label="max value"]'
+    );
+
     const inputMin = screen.getByRole('spinbutton', { name: 'min value' });
     const inputMax = screen.getByRole('spinbutton', { name: 'max value' });
 
@@ -29,8 +37,8 @@ describe('RangeWidgetUI', () => {
   test('renders specified limits', () => {
     const { container } = render(<Widget limits={[20, 50]} />);
 
-    const minLimit = screen.getByRole('slider', { name: 'min limit' });
-    const maxLimit = screen.getByRole('slider', { name: 'max limit' });
+    const minLimit = screen.getByLabelText('min limit');
+    const maxLimit = screen.getByLabelText('max limit');
 
     expect(minLimit).toHaveAttribute('aria-valuemin', '0');
     expect(minLimit).toHaveAttribute('aria-valuemax', '100');
@@ -46,8 +54,8 @@ describe('RangeWidgetUI', () => {
   test('renders specified limits with same min and max values', () => {
     const { container } = render(<Widget limits={[50, 50]} />);
 
-    const minLimit = screen.getByRole('slider', { name: 'min limit' });
-    const maxLimit = screen.getByRole('slider', { name: 'max limit' });
+    const minLimit = screen.getByLabelText('min limit');
+    const maxLimit = screen.getByLabelText('max limit');
 
     expect(minLimit).toHaveAttribute('aria-valuemin', '0');
     expect(minLimit).toHaveAttribute('aria-valuemax', '100');
@@ -63,8 +71,9 @@ describe('RangeWidgetUI', () => {
   test('renders specified limits and values', () => {
     const { container } = render(<Widget limits={[20, 80]} data={[40, 60]} />);
 
-    const minLimit = screen.getByRole('slider', { name: 'min limit' });
-    const maxLimit = screen.getByRole('slider', { name: 'max limit' });
+    const minLimit = screen.getByLabelText('min limit');
+    const maxLimit = screen.getByLabelText('max limit');
+
     const inputMin = screen.getByRole('spinbutton', { name: 'min value' });
     const inputMax = screen.getByRole('spinbutton', { name: 'max value' });
 
@@ -85,8 +94,8 @@ describe('RangeWidgetUI', () => {
   test('renders specified limits out of min-max range', () => {
     const { container } = render(<Widget limits={[101, 200]} />);
 
-    const minLimit = screen.getByRole('slider', { name: 'min limit' });
-    const maxLimit = screen.getByRole('slider', { name: 'max limit' });
+    const minLimit = screen.getByLabelText('min limit');
+    const maxLimit = screen.getByLabelText('max limit');
 
     expect(minLimit).toHaveAttribute('aria-valuemin', '0');
     expect(minLimit).toHaveAttribute('aria-valuemax', '100');
@@ -99,13 +108,21 @@ describe('RangeWidgetUI', () => {
     expect(container.getElementsByClassName('MuiSlider-mark').length).toBe(0);
   });
 
-  test('On selected method is called when we change slider values', async () => {
+  test('on selected method is called when we change slider values', async () => {
     const mockOnSelectedRangeChange = jest.fn();
     render(<Widget onSelectedRangeChange={mockOnSelectedRangeChange} />);
+
     const inputMin = screen.getByRole('spinbutton', { name: 'min value' });
     const inputMax = screen.getByRole('spinbutton', { name: 'max value' });
-    const minValue = screen.getByRole('slider', { name: 'min value' });
-    const maxValue = screen.getByRole('slider', { name: 'max value' });
+
+    // const minValue = screen.getByLabelText('min value');
+    // const maxValue = screen.getByLabelText('max value');
+    const minValue = document.querySelector(
+      'input[type="range"][aria-label="min value"]'
+    );
+    const maxValue = document.querySelector(
+      'input[type="range"][aria-label="max value"]'
+    );
 
     fireEvent.change(inputMin, { target: { value: 20 } });
     fireEvent.blur(inputMin);