Struggling with creating a price control using react js and MUI, similar to the image below:
https://i.stack.imgur.com/ZP8oc.png
I've searched online for libraries or solutions, but haven't found anything that works.
Struggling with creating a price control using react js and MUI, similar to the image below:
https://i.stack.imgur.com/ZP8oc.png
I've searched online for libraries or solutions, but haven't found anything that works.
If you're looking for a styled slider in MUI, out of the box, it doesn't provide exactly what you need. However, with some innovative styling and a bit of mathematical manipulation, you can customize the Ranged MuiSlider to achieve a similar effect.
While this example is quick and dirty (and incomplete), it serves as a good starting point if you decide to work with MUI.
The approach involves shaping the rail (.MuiSlider-rail) into a triangle using CSS properties like clip-path. A dynamic linear-gradient creates sharp color transitions resembling a grey-to-orange-to-grey background effect. Additionally, unnecessary elements like the track (.MuiSlider-track) are hidden for this implementation.
To position and resize the thumbs based on their values, some basic math calculations are used, which may require refinement depending on your specific requirements.
<Slider
getAriaLabel={() => "Price range"}
value={value}
onChange={handleChange}
valueLabelDisplay="auto"
getAriaValueText={valuetext}
marks={marks}
step={50}
sx={{
// Customize the rail as a triangle
"& .MuiSlider-rail": {
height: "20px",
borderRadius: 0,
clipPath: "polygon(0% 75%,100% 0%,100% 100%,0% 100%)",
background: `linear-gradient(90deg, #ccc ${start}%, #F74 ${start}%, #F74 ${end}%, #ccc ${end}%)`,
opacity: 1
},
// Hide the track (not necessary)
"& .MuiSlider-track": {
display: "none"
},
// Styles that can be customized further in the theme
"& .MuiSlider-thumb": {
top: "70%",
backgroundColor: "#F74",
border: "4px solid #fff",
boxShadow:
"0px 3px 1px -2px rgba(0,0,0,0.2), 0px 2px 2px 0px rgba(0,0,0,0.14), 0px 1px 5px 0px rgba(0,0,0,0.12)",
"&:before": {
boxShadow: "none"
}
},
// Resize/position thumbs individually based on values
"& [data-index='0']:not(.MuiSlider-markLabel)": {
top: `${70 - start / 5}%`,
width: `calc(20px + ${0.2 * start}px)`,
height: `calc(20px + ${0.2 * start}px)`
},
"& [data-index='1']:not(.MuiSlider-markLabel)": {
top: `${70 - end / 5}%`,
width: `calc(20px + ${0.2 * end}px)`,
height: `calc(20px + ${0.2 * end}px)`
},
"& .MuiSlider-markLabel": {
marginTop: "0.75rem",
color: "#c0c0c0",
"&.MuiSlider-markLabelActive": {
color: "#F74"
}
},
"& .MuiSlider-mark": {
display: "none"
}
}}
/>
Result:
https://i.stack.imgur.com/4owgW.png
Working CodeSandbox: https://codesandbox.io/s/rough-wildflower-6qfsfk?file=/demo.tsx:759-2218
This is a piece of JavaScript code: $(window).scroll(function() { $.ajax({ type: "GET", url: "not_data.php", data: dataString, success: function my_func () { //show new name ...
Hello there, I am just starting out with web development and learning about Vue.js. In Vue 3, the recommended way to import CSS files from different packages is as follows: Method 1: Import directly in app.js //app.js import '../css/app.css'; i ...
Currently, I am working on developing a search mechanism in HTML. It seems to be functioning properly when searching for data for the first time. However, subsequent searches do not yield the expected results. Additionally, when trying to search with empty ...
After successfully implementing the Hello World example by returning "Hello" and "world" from two different components, I encountered a problem with my code. In this specific code snippet, I am unable to return the Menubar component, although the Map compo ...
Here is the latest version of the source code: var xhttp = new XMLHttpRequest(); function passVars(var1, var2, var3) { if (var1.readyState == 4) { if (var1.status == 200) { var data = var1.responseText; if (data) { playSuccess ...
I am looking to optimize my video display in HTML by only showing it on desktop browsers. The difference in bandwidth between desktop and mobile devices is affecting the performance of mobile browsers, so I want to target only desktop users. Is there a way ...
After posing a similar question a few days back, I find myself encountering yet another hurdle in my project. The task at hand is to switch the background image when hovering over a button with a fade-in effect using @keyframes. However, I'm stuck bec ...
My goal is to create a feature where users can select a hotel name, number of days, guests, and peak time, the system will calculate them together and give a sum. Furthermore, I wish to store all user selections in the database, including the calculated to ...
I'm attempting to extract all the URLs from a webpage using jQuery so that I can later use them with $.get(). If these URLs were located on the same page as the script, retrieving them would be easy by doing something like var links = document.getEle ...
I recently installed the dropzone-ui package and noticed that while file items load and file icon previews show up when I drop files on the dropzone, image previews are not displaying. Could it be an issue with my implementation? Here's a snippet of ...
As I delve into e2e testing with Playwright, I've encountered a challenge. The application I need to test can only be accessed through Github OAuth or email authentication links, managed by next-auth in a NextJS project. I'm unsure how to approa ...
Is there a solution to validating the existence of an email value using ajax after validation work is completed? Despite attempting to check for the email value and display an alert if it exists, the form continues to submit regardless. See below for the ...
As a newcomer to VueJs, I am exploring how to create a component that enables multiple selection with a search option and the ability to select all or deselect all options. To achieve this functionality, I am utilizing the vue-element-ui library. You can ...
Can anyone help me figure out why my AJAX call to sessions.php is not correctly loading and returning true or false each time a user accesses the page? var section = $("#header a"); section.on('click', function() { $.ajax({ type: "PO ...
Just getting started with React and Typescript. I'm attempting to extract data from the configuration file based on the input(props), but it seems like Typescript is throwing errors. Any suggestions on how to tackle this issue? config.json { "t ...
Utilizing the md-fab-button from the initial angular2 material-framework has presented a challenge for me. I am attempting to set the md-fab-button(for adding a new entity) with position: fixed, but my goal is to position the button within an inner compone ...
The V-tab below generates the button known as the right one on the v-app-bar: https://i.stack.imgur.com/DzNmq.png <v-tab :to="'/demo'" active-class="text--primary" class=&quo ...
I am currently struggling to verify the existence of a particular cookie and remove certain data from redux if it is not present. Despite utilizing a package named 'cookies-next', I am unable to access the cookies. My approach involves using a c ...
I'm currently enrolled in a node.js course on Udemy which seems to be outdated. I've encountered some errors that I'm struggling to resolve. Here's what I've tried so far: using next(); adding return res inside all if statements ...
Currently in the process of creating a custom Wordpress theme and seeking guidance on implementation. You can view the design outline here. Planning to utilize 960.gs for the css layout. My main concern is how to approach the services section (1, 2, 3...) ...